浅谈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，下载项目查看

浅谈vue项目搭建中的性能优化

猜你喜欢