vue-cli中的哪些文件会被打包到app.js中呢? 项目最后打包的文件有太大,打开首页很慢怎么解决?

Question

vue-cli中的哪些目录 和文件最终会被打包呢 ?

最后打包的 app.js文件太大 导致网站打开很慢

要 10秒才能打开

这里4个 js分别是什么呢 有的可以不要吗

Answer 1

根据我的经验，可以把以下几点都优化下：

1. 启用代码压缩插件UglifyJsPlugin -- 压缩后通常文件大小能减少50%以上。
2. 一些基本不变的大库，比如vue.js和element-ui，都直接写个<script>标签用他们预构建的版本（比如vue.js用<script src="////cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script>），然后要在webpack里面配置externals让Vue从全局变量中加载 -- 而不要让webpack重新再打包一份。
3. 有些不是首屏的内容可以考虑使用AMD的方式异步加载（webpack里面直接用require("xxx").then(xxx => {...})就可以了）。
4. 生成环境建议把所有js、css和图片都放CDN上，并注意通过版本号或文件名来刷新CDN缓存。
5. 无用代码请及时删除 -- 见过有人import了一堆模块，结果很多都没用，又不删，结果构建出来的js超大！
6. 尽量使用es模块（即import和export的方式），而不要用node的模块（require和module.exports的方式）。
7. 如果可以，请升级到最新版本的webpack.

Answer 2

1 路由懒加载
将组件的引用方式改为异步, 这样webpack会把非首页的页面分隔开, 减小app.js的体积

2 看一下在生产环境是否开启了sourceMap 如果有 关掉,这个能极大减小文件的体积

Answer 3

如果产品在公共网络，可以考虑把 vendor.js 的依赖去掉，从 CDN 加载，比如 staticfile.org 或者 cdnjs.com，这样可以省去不少时间。

然后就是把 sourcemap 去掉，如楼上所说。