开启掘金成长之旅!这是我参与「掘金日新计划 · 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`一起使用。这个插件的功能是生成代码分析报告,帮助提升代码质量和网站性能