前端工具-webpack生产模式优化介绍

拨云见日

在webpack4中新增了，很多生产模式优化的功能 ，这些功能都是开箱即用的，大大提高了开发效率

这些开箱即用的功能开发体验很友好，但是对于初学者容易造成混淆，在本篇文章将仔细介绍一下

DefinePlugin

DefinePlugin这个插件集成在webpack内部直接通过webpack.DefinePlugin使用即可

DefinePlugin 这个插件为代码注入全局成员，在production模式下这个插件默认启用,并且往代码中注入

process.env.NODE_ENV一个常量，很多第三方库都是根据这个常量去执行一些操作例如打印日志之类的

webpack配置如下

plugins: [
        new webpack.DefinePlugin({
            // 值要求的是一个代码片段
            //如果想输入一个值的话可以使用这种方式
            API_BASE_URL: JSON.stringify('https://api.example.com'),
            DATA_BASE_URL: JSON.stringify("https://www.baidu.com")
        })
]

在js文件中使用

console.log(API_BASE_URL); // =>console.log("https://api.example.com");

console.log(DATA_BASE_URL); // => console.log("https://www.baidu.com");

TreeShaking

TreeShaking翻译成中文是摇树的意思，在这里主要是去除代码中未引用代码(dead-code),
在生产模式自动开启TreeShaking

TreeShaking并不是webpack中的某个配置选项，而是一组功能搭配使用后的优化效果，在生产模式自动开启

webpack中的 optimization里面提供一些方法用于生产模式优化的

  optimization: {
    // 模块只导出被使用的成员
    usedExports: true,
    // 尽可能合并每一个模块到一个函数中,既提高运行效率，
    //又减小了代码运行的体积,这种特性又被成为Scope Hosting
    concatenateModules: true,
    // 压缩输出结果
    minimize: true
  }
这就是treeshaking的实现

treeshaking & babel

treeshaking 的前提是使用ESModule语法，也就是说，由webpack打包的代码必须使用ESModule

我们一般用babel-loader来处理js文件，babel-loader默认将ESModule转换成commonjs，所以导致

treeshaking失效,但是在实际开发过程中使用最新版本的babel-loader,treeshaking并不会失效

原因是在最新版本的babel-loader自动关闭了ESModule转换的插件,所以treeshaking不会失效

如果说实在是没有信心的话可以对preset这个插件再次进行配置,不过很多人容易配错,这里需要注意如下所示
{
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              // 如果 Babel 加载模块时已经转换了 ESM，则会导致 Tree Shaking 失效
              // ['@babel/preset-env', { modules: 'commonjs' }]
              // ['@babel/preset-env', { modules: false }]
              // 也可以使用默认配置，也就是 auto，这样 babel-loader 会自动关闭 ESM 转换
              ['@babel/preset-env', { modules: 'auto' }]
            ]
          }
        }
}

sideEffects

sideEffects是webpack4中新增的方法,作用就是用于标识代码是否有副作用,为treeshaking提供更大的压缩空间

副作用:模块执行时出了导出成员之外是否还做了其他的事情,一般呢用于开发npm模块标记是否有副作用

使用sideEffects,需要在webpack.config.js和package.json配置一下

webpack.config.js配置

  optimization: {
    sideEffects: true,//开启sideEffects,在生产模式下自动开启
  }
  
package.json配置如下
  "sideEffects":false//标记没有副作用,
  
注意要是"sideEffects":false你要确定你的代码没有副作用,要是有副作用的话sideEffects就不能这么写了

可以写成数组的形式,里面写文件的路径或者是通配符如下所示

  "sideEffects": [
    "./src/extend.js",
    "*.css"
  ]

千里之行，始于足下 谢谢观看，如有不足，敬请指教