webpack打包优化

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第5天,点击查看活动详情

1. 缩小范围

1.1 extensions 指定extensions后,打包的时候给文件添加后缀会在这里面取,依次添加后缀进行匹配

   resolve: {
       extensions: [".js",".jsx",".json",".css"]
   },

1.2 alias 别名,指定某些文件的别名,加快webpack查找速度

// 每当引入bootstrap模块的时候,它会直接引入bootstrap,而不需要从node_modules文件夹中按模块的查找规则查找
const bootstrap = path.resolve(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css')
resolve: {
   alias:{
       bootstrap
    }
},

1.3 resolveLoader

//用于配置解析 loader 时的 resolve 配置,默认的配置:
 resolveLoader: {
    modules: [ 'node_modules' ],
    extensions: [ '.js', '.json' ],
    mainFields: [ 'loader', 'main' ]
  }

2. noParse

  • module.noParse字段可以配置那些模块的文件不需要进行解析,如我们常用的jquery,lodash
  • 不需要解析依赖(即无依赖) 的第三方大型类库等,可以通过这个字段来配置,以提高整体的构建速度
module: {
  noParse: /jquery|lodash/, // 正则表达式
  // 或者使用函数
  noParse(content) {
    return /jquery|lodash/.test(content)
  },
}

3. IngnorePlugin

常用于忽略某些特定模块,让webpack不把它打包进去

new webpack.IgnorePlugin({
      contextRegExp: /moment$/,//目录的正则
      resourceRegExp: /locale/   //请求的正则
}),

4. 压缩资源

optimize-css-assets-webpack-plugin是一个优化和压缩CSS资源的插件 terser-webpack-plugin是一个优化和压缩JS资源的插件

//TerserPlugin 
    optimization: {
     minimize: true,//启用压缩
     minimizer:[new TerserPlugin()]
   }, 


   new OptimizeCssAssetsWebpackPlugin()

5. 使用cdn对文件进行缓存, 打包时会给文件添加hash后缀

hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值。如果文件内容改变的话,那么对应文件哈希值也会改变,对应的HTML引用的URL地址也会改变,触发CDN服务器从源服务器上拉取对应数据,进而更新本地缓存。

6. 打包费时分析和生成代码报告

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const smw = new SpeedMeasureWebpackPlugin();
module.exports =smw.wrap({
});
`webpack-bundle-analyzer`是一个webpack的插件,需要配合`webpack``webpack-cli`一起使用。这个插件的功能是生成代码分析报告,帮助提升代码质量和网站性能

image.png