【Q097】打包出来的文件很大，怎么解决？

[kangyana]

1. 优化 devtool 中的 source-map

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

建议在 生产环境 下关闭 source-map：

module.exports = {
 devtool: false,
};

2. 剥离 css 文件，单独打包

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

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

使用方法：

module.exports = {
  plugins:[
   new ExtractTextPlugin('static/css/styles.[contenthash].css'),
  ]
};

3. 使用 UglifyJSPlugin 压缩。

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

npm install uglifyjs-webpack-plugin --save-dev

使用方法：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  plugins: [
     new UglifyJSPlugin({
            parallel: 4,
            uglifyOptions: {
                output: {
                    comments: false,
                    beautify: false,
                },
                compress: {
                    warnings: false
                },
            },
            cache: true,
        }),
  ]
}

3. 提取公共依赖

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

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

4. 开启 gzip 压缩

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

npm install compression-webpack-plugin --save-dev

使用方法：

const CompressionPlugin = require("compression-webpack-plugin");

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

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

添加插件 html-webpack-plugin：

npm install html-webpack-plugin --save-dev

使用方法：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  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'
       }),
  ]
}