Webpack入门(三)性能优化

一.提高构建速度

• 缩小文件搜索范围

1.通过exclude、include 缩小搜索范围

module.exports = {
    module:{
        rules:[
            {
                test:/\.js$/,
                loader:'babel-loader',
                // 只在src文件夹中查找
                include:[resolve('src')],
                // 排除的路径
                exclude:/node_modules/
            }
        ]
    }
}

2. 合理利用resolve 字段配置

2.1 配置resolve.modules:[path.resolve(__dirname,'node_modules')]避免层层查找

其中 resolve.modules会告诉webpack去哪些目录寻找第三方模块，如果不配置 path.resolve(__dirname,'node_modules')，则会依次查找./node_module、../node_modules，一层一层网上找，这显然效率不高。

2.2对庞大的第三方模块设置 resolve.alias，使webpack直接使用库的min文件，避免库内解析

可以通过别名的方式来映射一个路径，能让Webpack更快找到路径。

比如:

resolve.alias:{
    'react':patch.resolve(__dirname, './node_modules/react/dist/react.min.js')
}

副作用是会影响Tree-Shaking，适合对整体性比较强的库使用。

2.3 resolve.extensions ，减少文件查找

resolve.extensions 用来表明文件后缀列表，默认查找顺序是：['.js','.json']，如果你的导入文件没有添加后缀就会按照这个顺序查找文件。我们应该尽可能减少后缀列表长度，然后将出现频率高的后缀排在后面。

• 缓存之前构建过的js

将Babel编译过的文件缓存起来，下次只需要编译更改过的代码文件即可，这样可以大幅度加快打包时间。

loader:'babel-loader?cacheDirectory=true'

• 提前构建第三方库

处理第三方库的方法有很多种，其中，Externals不够聪明，一些情况下会引发重复打包的问题；而 CommonsChunkPlugin 每次构建时都会重新构建一次 vendor；处于效率考虑还是考虑使用DllPlugin。

DLL全称Dynamic-link library，（动态链接库）。到底怎么个动态法。原理是将网页依赖的基础模块抽离出来打包到dll文件中，当需要导入的模块存在于某个dll中时，这个模块不再被打包，而是去dll中获取，而且通常都是第三方库。那么为什么能提升构建速度，原因在于这些第三方模块如果不升级，那么只需要被构建一次。

使用方法

1.构建dll文件，表示有哪些库需要被提前打包出去。

// 单独配置在一个文件中
// webpack.dll.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
    entry:{
        // 统一打包的类库
        vendor:['react']
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].dll.js',
        library:'[name]-[hash]'
    },
    plugins:[
        new webpack.DllPlugin({
            // name 必须和 output.library 一致
            name:'[name]-[hash]',
            // 该属性需要与 DllReferencePlugin 中一致
            context: __dirname,
            path:path.join(__dirname,'dist','[name]-manifest.json')
        })
    ]
}
​
ps:
1.需要注意DllPlugin的参数中name值必须和output.library值保持一致
2.生成的manifest文件中会引用output.library值

2.接下来使用DllReferencePlugin 将依赖的第三方库引入项目

// webpack.config.js
module.exports = {
  // ...省略其他配置
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      // manifest 就是之前打包出来的 json 文件
      manifest: require('./dist/vendor-manifest.json'),
    })
  ]
}
​
//还有另外一种写法: 在html页面引入的方式
module.exports = {
  // ...省略其他配置
  plugins: [
      // 告诉webpack哪些库不需要参与打包，同时使用时的名称也得变~
    new webpack.DllReferencePlugin({
      context: __dirname,
      // manifest 就是之前打包出来的 json 文件
      manifest: resolve('./dist/vendor-manifest.json'),
    }),
    // 将某个文件打包输出出去，并在html中自动引入该资源文件
    new