14、webpack生产环境构建

今天药忘吃喽~ 2022-01-27 15:23 316阅读 0赞

**1）代码压缩**

虽然 [UglifyJSPlugin][] 是代码压缩方面比较好的选择，但是还有一些其他可选择项。以下有几个同样很受欢迎的插件：

*  [BabelMinifyWebpackPlugin][]
 *  [ClosureCompilerPlugin][]

如果决定尝试以上这些，只要确保新插件也会按照 [tree shake][] 指南中所陈述的，具有删除未引用代码(dead code)的能力足矣。

**2）source map**

基于调试源码和基准测试的帮助，生产环境建议开启source map，但是建议使用source-map，而不是开发中的inline-source-map

配置更改如下

const merge = require('webpack-merge');
      const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
      const common = require('./webpack.common.js');
    
      module.exports = merge(common, {
        devtool: 'source-map',
        plugins: [
         new UglifyJSPlugin({
           sourceMap: true
         })
        ]
      });

※避免在生产中使用 inline-\*\*\* 和 eval-\*\*\*，因为它们可以增加 bundle 大小，并降低整体性能。

**3）指定环境**

许多 library 将通过与 process.env.NODE\_ENV 环境变量关联，以决定 library 中应该引用哪些内容。例如，当不处于生产环境中时，某些 library 为了使调试变得容易，可能会添加额外的日志记录(log)和测试(test)。其实，当使用 process.env.NODE\_ENV === 'production' 时，一些 library 可能针对具体用户的环境进行代码优化，从而删除或添加一些重要代码。我们可以使用 webpack 内置的 [DefinePlugin][] 为所有的依赖定义这个变量：

更改webpack.prod.js文件如下

检查设置是否有效

更改src/index.js

import { cube } from './math.js';
     
      if (process.env.NODE_ENV !== 'production') {
        console.log('Looks like we are in development mode!');
      }
    
      function component() {
        var element = document.createElement('pre');
     
        element.innerHTML = [
          'Hello webpack!',
          '5 cubed is equal to ' + cube(5)
        ].join('\n\n');
    
        return element;
      }
    
      document.body.appendChild(component());

**4）分离css文件**

使用ExtractTextPlugin将CSS分离成单独的文件

// 用法：
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: "css-loader"
            })
          }
        ]
      },
      plugins: [
        new ExtractTextPlugin("styles.css"),
      ]
    }

它会将所有的入口 chunk(entry chunks)中引用的 \*.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。

[UglifyJSPlugin]: https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin
[BabelMinifyWebpackPlugin]: https://github.com/webpack-contrib/babel-minify-webpack-plugin
[ClosureCompilerPlugin]: https://github.com/roman01la/webpack-closure-compiler
[tree shake]: https://www.webpackjs.com/guides/tree-shaking
[DefinePlugin]: https://www.webpackjs.com/plugins/define-plugin