位置: IT常识 - 正文
推荐整理分享webpack调优技巧(webpack怎么优化),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:webpack做的优化,webpack常用配置,webpack优化方法,webpack优化方法,webpack常用配置,webpack使用,webpack使用,webpack使用,内容如对您有帮助,希望把文章链接给更多的朋友!
webpack优化主要有三个方面:1.提高构建速度,2.减少打包体积,3.优化用户体验
提高构建速度:启用多线程thread-loader使用thread-loader插件可以启用多线程进行构建。
使用缓存cache-loader使用cache-loader插件可以对构建进行缓存,加快后续的构建速度。
热更新热更新只更新改动的代码文件,无需编译整个项目。
exclude&includeexclude选项是构建时忽略的文件,include选项是构建时需要构建的文件。配置好exclude和include,可以避免对不必要的文件进行构建。
减少打包体积压缩css代码css-minimizer-webpack-plugin
压缩js代码terser-webpack-plugin
tree-shakingtree-shaking就是只编译需要的代码。webpack5该特性默认启用。
source-mapsource-map帮助在源代码中定位bug。开发模式使用更精确但体积更大的source-map
module.exports = { mode: 'development', devtool: 'eval-cheap-module-source-map'}生产模式使用体积小但不那么精确的source-map
module.exports = { mode: 'production', devtool: 'nosources-source-map'}打包分析webpack-bundle-analyzer插件可以看到各个文件的打包大小,帮助对对应的文件进行优化优化用户体验延迟加载模块在vue中,用下面箭头函数的方式引入模块,就可以按需加载模块。react的延迟加载和vue类似,angular也有自己的延迟加载方式。// src/router/index.jsconst routes = [ { path: '/login', name: 'login', component: login }, { path: '/home', name: 'home', // lazy-load component: () => import('../views/home/home.vue'), },]Gzip最常见的压缩文件的算法。可以在网络传输中压缩数据,加快传输速度。需要后端的配合。插件 compression-webpack-plugin
base64小图片可以转成base64嵌进代码中,减少http请求数量。插件 asset-module
hash如下配置可以给打包文件加上hash后缀,生成hash后缀管理浏览器缓存。只要文件名和之前不同,浏览器就会向服务端重新请求文件。反之,浏览器会从协商缓存中读取文件。重新部署了项目,文件名称未修改,客户端不一定能获取到最新的代码。webpack会自动更改有改动的打包文件的hash后缀,可以自动实现文件的缓存管理。
output: { path: path.resolve(__dirname, '../dist'), filename: 'js/chunk-[contenthash].js', clean: true, },上一篇:python循环语句的两种类型(python循环语句的语法)
下一篇:【HDLBits刷题日记】08 Karnaugh Map to Circuit(高效刷题app)
友情链接: 武汉网站建设