浅谈vue项目搭建中的性能优化
1.采用cdn,在index.html的文件头部引入vue和element-ui的组件库。两个图片分别来源vue官方文档和vue-router的官方文档,建议使用锁定版本
可以参考最新的element-ui官方文档,及本来准备引入的版本,实践中,建议锁定链接版本号。以下是我在实践中的引入截图
2.在项目中引入vue的文件,可以都去掉。
通常我们在main.js中
//import Vue from "vue"
// import ElementUI from "element-ui"
// import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
现在我们可以都注释掉。
3.在build\webpack.base.conf.js 中进行修改,在module.exports中添加如下内容:
该对象中,如 "element-ui"键名是npm安装的包名,值是别名
externals:{
"element-ui":"ELEMENT", //名称是固定的
"vue":"Vue"
},
意思为不进行打包的文件,如不设置,外部引入的内容将会被打包
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT'
}
//...其他代码
}
4.代码打包成压缩包,浏览器支持自动解压的将会加载压缩包
在config\index.js 中进行修改
productionGzip: true, //需要下载相应的包 npm install --save-dev compression-webpack-plugin
当你执行这个命令后,会发现提示你升级webpack,因为默认安装的2.x版本需要引入webpack4.x版本的包的支持,所以可以以下两种方法解决:
1/升级webpack的版本到4.X
2/指定compression-webpack-plugin的版本[email protected]
5.路由懒加载的使用
参考vue-router官方文档,
https://router.vuejs.org/guide/advanced/lazy-loading.html
具体的可以如下:
总结:通过以上几步,可以大大降低打包出来文件的体积(几兆的体积降到几十kb),提高打包和访问的速度。
如有错误,欢迎留言指正。
大家也可以通过 码云https://gitee.com/lelehouse/pixland_web,下载项目查看