频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
webpack打包之后,文件过大的问题怎么解决?
2018-03-16 15:18:42         来源:caolonggang的博客  
收藏   我要投稿

优化devtool中的source-map.

dev-tool提供了很多种选项,用来增强我们debug的能力,我们熟知的有:source-map,inline-source-map,cheap-source-map等等。

Devtool官方文档,

Devtool配置对比,

webpack sourcemap 选项多种模式的一些解释,

如果你的文件在打包之后突然变成好几M,那么不用想,肯定是因为source-map的原因。source-map在开发阶段确实很好用,调试起来很方便,但是在生产环境下就没必要部署了。

建议在prod环境下关闭source-map。

剥离css文件,单独打包

安装webpack插件extract-text-webpack-plugin。

npm install extract-text-webpack-plugin --save-dev。

使用方法:

plugins:[
 new ExtractTextPlugin('static/css/styles.[contenthash].css'),
]

这里使用了contenthash,webpack会根据内容去生成hash值。

使用UglifyJSPlugin压缩。

通过UglifyJSPlugin可以压缩我们的*.js文件。

安装方法: npm install uglifyjs-webpack-plugin --save-dev。

用法:

UglifyJSPlugin详细用法

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  plugins: [
     new UglifyJSPlugin({
            parallel: 4,
            uglifyOptions: {
                output: {
                    comments: false,
                    beautify: false,
                },
                compress: {
                    warnings: false
                },
            },
            cache: true,
        }),
  ]
}

提取公共依赖

使用CommonsChunkPlugin插件,将多个js文件进行提取,建立一个独立的文件。这个文件包含一些共用模块,浏这样览器只在刚开始的时候加载一次,便缓存起来供后续使用。而不用每次访问一个新界面时,再去加载一个更大的文件。

 entry:{
    app:'./entry',
    vendor:['react','other-lib'],
 },
 plugins:[
     new Webpack.optimize.CommonsChunkPlugin({
         name: 'vendor',
     }),
 ]

开启gzip压缩

我们使用compression-webpack-plugin插件进行压缩。

安装:npm install compression-webpack-plugin --save-dev。

compression-webpack-plugin 详细用法

使用:

const CompressionPlugin = require("compression-webpack-plugin");
plugins:[
new CompressionPlugin({
     asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径,[query] 替换成原查询字符串
     algorithm: 'gzip',//算法
     test: new RegExp(
          '\\.(js|css)$'    //压缩 js 与 css
     ),
     threshold: 10240,//只处理比这个值大的资源。按字节计算
     minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
})
]

压缩结果:

这里写图片描述

这里写图片描述

开启html压缩,自动添加上面生成的静态资源

添加插件html-webpack-plugin

安装: npm install html-webpack-plugin --save-dev

用法:

plugins:[
  new HtmlWebpackPlugin({
      title: '',
         template: __dirname + '/../public/index.html',
         minify: {
             removeComments: true,
             collapseWhitespace: true,
             removeRedundantAttributes: true,
             useShortDoctype: true,
             removeEmptyAttributes: true,
             removeStyleLinkTypeAttributes: true,
             keepClosingSlash: true,
             minifyJS: true,
             minifyCSS: true,
             minifyURLs: true,
         },
         chunksSortMode:'dependency'
     }),
]
点击复制链接 与好友分享!回本站首页
上一篇:FastAdmin如何添加首字母大写功能?
下一篇:CSS之水平垂直居中布局的五种方法介绍
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站