webpack优化

147 阅读1分钟

1.noParse // 不去解析某个包中的依赖项

module: {
    noParse:/jquery/, //像jquery,我们知道它的内部没有依赖其他包,我们就可以告诉webpack不解析它的依赖项
    ...
  },

2.exclude,include //配一个即可

{
        test: /\.js$/,
        exclude: /node_modules/,
        includes: path.resolve(__dirname, "src"),
      },

3.IgnorePlugin webpack内置plugin

new IgnorePlugin({
      contextRegExp:/\.\/locale/, 
      resourceRegExp:/moment/
    }),, //假如项目中使用了moment,他默认会引入多个版本的语言,其实我们并不需要,可以忽略掉,然后手动进行引入需要的

4.DllPlugin配合DllReferencePlugin

先将一些库如react提前打包好,手动进行引入,后面就不会对react进行打包

5.Happy 多线程打包

当项目比较大时可以开启多线程打包,比较小的话效果分配线程也需要时间,没有必要。

6.treeshaking webpack内置

当我们定义了方法但是没有被使用到的时候在生产环境下webpack会自动处理掉,不进行打包。这种只对import语法有效,require语法识别不了。

7.scope hosting 作用域提升,webpack内置

// 像下面这种语法webpack会自动识别将他们加起来
let a = 1
let b = 2
let c = 3
console.log(a+b+c,'========================');
打包后结果
console.log(6,"========================")

8.splitChunks 公共代码抽离,一般在多入口的时候使用

// 存在A入口和B入口,他们同时使用了c模块或者公共模块
optimization:{
        splitChunks:{// 分割代码块
            cacheGroups:{
                common:{
                    chunks:'initial',
                    minSize:0, // 只要超过0字节就抽离
                    minChunks:2, // 至少被2个chunk引用
                },
                vendor:{ // 抽离第三方模块
                    priority:1,// 优先级
                    test:/node_modules/,
                    chunks:'initial',
                    minSize:0,
                    minChunks:2,
                }
            }
        }
    }

9.import('...') 懒加载

在vue和react中我们使用的路由懒加载

10.模块热更新