Vue cli3 项目优化
2019-08-18 本文已影响0人
阿畅_
记录一下最近 vue 项目的优化方案
-
最近一个人又做活动页又做App里的页面,还要写公司的后台,搞得有点累,随着活动做得越来越多,vue 的项目慢慢堆的打包之后变得很大,需要做项目的优化
-
网上也找了很多的方案,基本上套路都差不多,但有些写的不是很全,总结一下我的用法
-
可以先安装一个 webpack 插件,以对症下药
npm intall webpack-bundle-analyzer –save-dev
yarn add webpack-bundle-analyzer -D
- 然后在 vue.config.js 中使用这个插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
configureWebpack: config => {
config.plugins.push(
new BundleAnalyzerPlugin()
)
}
}
执行 npm run serve 或 yarn serve
也可以在 package.json 中配置
"analyz": "npm_config_report=true npm run build"
image.png
-
可以看到类似的网页,可以看到哪个文件比较大,从而进行优化。
-
分享一下我的优化的
- 因为随着项目越来越大,引入的第三方依赖很多,可以把部分的依赖用CDN的方式引入
例如: vue、vuex、vue-router、axios 等
在 vue.config.js 中加入
const JS_CDN = [
"https://cdn.bootcss.com/vue/2.6.10/vue.min.js",
"https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js",
"https://cdn.bootcss.com/vue-router/3.1.0/vue-router.min.js",
"https://cdn.bootcss.com/axios/0.19.0/axios.min.js"
]
const CSS_CDN = [
... 引入 css 文件
]
const CDN = {
js: JS_CDN,
css: CSS_CDN
}
这里一般都是用公司的 CDN 地址,如果没有的话可以用 BootCDN ,一个开源的 CDN 服务
const isProduction = process.env.NODE_ENV !== 'development';
// 使用 CDN,也可以分环境判断不在开发环境使用
module.exports = {
if (isProduction) {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
},
}
configureWebpack: config => {
if (isProduction ) {
config.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'html2canvas': 'html2canvas',
'swiper': 'Swiper',
'vue-awesome-swiper': 'VueAwesomeSwiper',
'axios': 'axios'
}
}
}
}
- 修改 index.html
删除项目中的引用文件
例如: main.js
// import Vue from 'vue'
问题: 那引用的引用的第三方文件怎么使用 ?
还是通过 Vue.use()
Vue.use(VueAwesomeSwiper)
使用第三方库
例如: html2canvas
没用 CDN 前,实在项目中使用的地方直接
import html2canvas from 'html2canvas'
使用 CDN 后可以挂在 Vue 是原型上
Vue.prototype.$html2canvas = html2canvas
Vuex 修改部分
// import Vue from 'vue'
// import Vuex from 'vuex'
// Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
...
}
})
export default store
- 使用路由懒加载
- 直接路由懒加载
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
- 还可以把组件按组分块
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
这里vue的官方文档上有写
- 把部分模块按需引入
例如: echarts
按需加载 echarts 推荐一个插件
npm i babel-plugin-equire -D
创建 echarts.js
// 写入需要的模块
const echarts = equire([
'scatter'
])
export default echarts
在 babal.config.js
module.exports = {
presets: [
'@vue/app'
],
plugins:[
...
"equire"
]
}
项目中使用
import echarts from './echarts.js'
...
除了以上这些还有分割代码,使用 Gzip 加速等方式可以优化代码