继续优化博客Vue+Webpack生成的Javascript文件体积
source link: https://www.dongwm.com/post/optimize-javascript/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
继续优化博客Vue+Webpack生成的Javascript文件体积
/ 2020-01-11 / / 阅读数:3643昨天 lyanna 刚发布了 v3.2，这里面只有一个更新，就是极大的降低了后台和动态这种使用 Vue+webpack 生成的 Javascript 文件的体积。其实代码改动不大，但是效果很明显，本文就是分享这件事。
原来的效果
在之前的版本里面 Javascript 文件大小如下:
❯ du -sh static/js/activity/*.js 208K static/js/activity/app.js 1.9M static/js/activity/chunk-vendors.js ❯ du -sh static/js/admin/*.js 824K static/js/admin/app.js 8.0K static/js/admin/chunk-2d230fe7.js 4.0K static/js/admin/chunk-2d2382a4.js 28K static/js/admin/chunk-46e421b1.js 1.9M static/js/admin/chunk-vendors.js
可以看到 chunk-vendors.js 都达到了 1.9M!，app.js 文件也比较大。
关于上一次优化可以看 优化博客后台 (Vue) Javascript 文件体积 这篇文章，主要是把一些比较大的库抽出来，用 CDN 来独立服务。
当时我的感觉是页面那么点逻辑，即便加上相关依赖也不应该产生这么大的文件，但是由于不了解 webpack 工作原理就先作罢了，不过幸好做过运维，知道可以在 Nginx 上开启 Gzip 压缩，所以大家在访问页面时，请求的文件大小约实际的 1/3:
lyanna 3.0 加了动态后，又看到这样的文件体积问题。虽然 chunk-vendors.js 是 590k 看起来不大，由于网站流量小我倒不考虑带宽问题，但关键是打开慢呀，你想想访问者打开它需要几秒，页面就一直空白着？所以马上加了 CDN 的支持：过去静态文件是直接服务的，现在已经改成了使用某云。缓解了打开慢的问题，不过「文件大」还是没有根本解决。所以昨天我又开始研究这个问题了，下面是过程。
尝试修改依赖关系解决
网站翻了很多优化文件，无果。第一个点是看yarn build --report生成的报告产生的思路，先看一下:
左上有一个很大的 core-js 区域，好像这不是我的依赖啊！查了下，说它是 @babel/polyfill 的核心依赖，打开 package.json 文件看到它在 dependencies 项里面。我来了灵感，因为 dependencies 是生产环境里需要打包的库，而它和 node-sass 以及 sass-loader 等都是打包过程用的，我不记得我为什么没把它放在 devDependencies 项里面。
但是尝试了一下，对产生的 dist 文件体积没有影响，失败~
找到终极优化方案
最终是我用编辑器打开 chunk-vendors.js 文件，想看看里面到底有什么。我翻到了非常非常多的类似下面的内容:
...//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9ub2RlX21vZHVsZXMvY29yZS1qcy9pbnRlcm5hbHMvdG8tc3RyaW5nLXRhZy1zdXBwb3J0LmpzPzAwZWUiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsc0JBQXNCLG1CQUFPLENBQUMsTUFBZ0M7O0FBRTlEO0FBQ0E7O0FBRUE7O0FBRUEiLCJmaWxlIjoiMDBlZS5qcyIsInNvdXJjZXNDb250ZW50IjpbInZhciB3ZWxsS25vd25TeW1ib2wgPSByZXF1aXJlKCcuLi9pbnRlcm5hbHMvd2VsbC1rbm93bi1zeW1ib2wnKTtcblxudmFyIFRPX1NUUklOR19UQUcgPSB3ZWxsS25vd25TeW1ib2woJ3RvU3RyaW5nVGFnJyk7XG52YXIgdGVzdCA9IHt9O1xuXG50ZXN0W1RPX1NUUklOR19UQUddID0gJ3onO1xuXG5tb2R1bGUuZXhwb3J0cyA9IFN0cmluZyh0ZXN0KSA9PT0gJ1tvYmplY3Qgel0nO1xuIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///00ee\n")}...
整个文件就是因为这种注释造成的文件过大。啊！这不是 sourcemap 嘛？我还是怀疑人生，因为项目一开始我就在 vue.config.js 里面加了一句productionSourceMap: false，表示生产环境禁用... 但是木有生效！或者我理解错了，它只是说生产环境不用 xx.map 文件。
然后搜了下，改成了下面这样:
const debug = process.env.NODE_ENV !== 'production'
module.exports = {
...
productionSourceMap: false, // 生产环境禁用
configureWebpack: (config) => {
if (debug) {
config.devtool = 'eval-source-map'
} else {
config.devtool = false
}
config.output.filename = 'static/js/activity/[name].js'
config.output.chunkFilename = 'static/js/activity/[name].js'
config.externals = {
'vue': 'Vue',
'moment': 'moment'
}
},
...
主要是 configureWebpack 部分内部加了判断，如果在开发环境使用eval-source-map，生产环境不开启 devtool 这项。
重新yarn build:
❯ du -sh static/js/activity/*.js 28K static/js/activity/app.js 364K static/js/activity/chunk-vendors.js ❯ du -sh static/js/admin/*.js 108K static/js/admin/app.js 4.0K static/js/admin/chunk-2d230fe7.js 4.0K static/js/admin/chunk-2d2382a4.js 4.0K static/js/admin/chunk-45698e1a.js 268K static/js/admin/chunk-vendors.js
就拿 activity 的文件来说，app.js 从 208k 降到了 28k (原来的 1/7)，chunk-vendors.js 从 1.9M 降到了 364k (原来的 1/5)。感觉很多效果都有这个问题啦~
再看看浏览器访问的压缩之后的文件体积:
合并 vendor 和 app
前面已经优化了 chunk-vendors.js，现在 app.js 和 chunk-vendors.js 都不大，没必要产生 2 个请求，所以合并一下:
// vue.config.js
module.exports = {
configureWebpack: {
optimization: {
splitChunks: false
}
}
}
❯ du -sh static/js/activity/app.js 384K static/js/activity/app.js
现在体积比之前的 392 (364 + 28) k，还要小一点。
最后表达一下心情:
Recommend
-
351
手把手教你如何使用webpack 生成css sprites 2017年10月03日 02:42 · 阅读 7087 ...
-
64
webpack模板之大文件优化 Original...
-
76
Webpack 启动后会从配置的 Entry 出发，解析出文件中的导入语句，再递归的解析。在遇到导入语句时 Webpack 会做两件事情： 根据导入语句去寻找对应的要导入的文件。例如 require('react') 导入语句对应的文件是 ./node_module...
-
56
webpack...
-
107
Webpack原理-输出文件分析 虽然在前面的章节中你学会了如何使用 Webpack ，也大致知道其工作原理，可是你想过 Webpack 输出的 bundle.js 是什么样子的吗？...
-
193
以前一直使用create-react-app这个脚手架进行react开发，后面因为一些自定义的配置，转而使用webpack搭建一套自己的脚手架。但是在使用webpack打包之后发现，纳尼？怎么文件这么大？？？ 于是研究了一下如何处理webpack打包之后文件太
-
59
程序员 - @yantianqi - 有什么解决办法吗？
-
26
腾讯DeepOcean原创文章：dopro.io/webpack-spr… 前言 在HTTP/2.0还没有普及的现在，css sprite(雪碧图)仍是前端工程化中必备的一环，而随着webpack应用的普及，构建工具切换到webpack后雪碧图该如何处理呢？
-
16
Vue 中 npm run build 通过传递参数来打包不同版本 这篇文章主要介绍在 Vue 项目中，编译阶段（npm run build）通过传递参数，实现不同环境打包不同版本。例如使用 npm run build – xxx，根据传递参数 xxx 来判定不同的环境，将代...
-
6
webpack的chunk生成逻辑发布于 今天 15:34 刚接触webpack时，使用webpack打包后只会生成一个被称为bundle的文件，在慢慢熟悉webpack后，如果同时对于前端优化有一定...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK