vue 首屏加载优化

1. 把不常改变的库放到 index.html 中,通过 cdn 引入

然后找到 build/webpack.base.conf.js 文件,在 module.exports = { } 中添加以下代码

复制externals: {'vue':'Vue','vue-router':'VueRouter','element-ui':'ELEMENT',},

这样 webpack 就不会把 vue.js, vue-router, element-ui 库打包了。声明一下,我把 main.js 中对 element 的引入删掉了,不然我发现打包后的 app.css 还是会把 element 的 css 打包进去,删掉后就没了。

然后你打包就会发现 vendor 文件小了很多~

2. vue 路由的懒加载

3. 不生成 map 文件

     找到 config/index.js,修改为 productionSourceMap: false

4. vue 组件尽量不要全局引入

5. 使用更轻量级的工具库

6. 开启gzip压缩

7. 首页单独做服务端渲染


摘:https://www.cnblogs.com/chenwenhao/p/11258895.html#_label0

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。