前端架构师必备之Vue项目打包优化

时间 2019-11-30

标签前端架构师必备 vue 项目打包优化繁體版

原文原文链接

前几天听老师讲过前端架构师必备之Vue项目打包优化的课以后，有感而发利用空闲时间写了一下。css

大佬路过请留步知道一下，html

使用vue-cli部署生产包时，发现资源包很大，打包后的vendor.js达到了1.4M，这已经很大了，并且会影响到首屏加载。那么，怎么优化呢？前端

1.组件按需加载vue

这是首先能够优化的点。若是频繁使用了第三方组件/UI库，如个人项目中常常同时使用了 element-ui, mint-ui,echarts等组件库，若是所有引入，项目体积很是大，这时能够按需引入组件。node

示例以下：webpack

1.1 element-uiweb

首先，安装 babel-plugin-component：面试

npm install babel-plugin-component -Dvue-router

而后，将.babelrc 修改成：vuex

```
{
 "presets": [["es2015", { "modules": false }]],
 "plugins": [
 [
 "component",
 {
 "libraryName": "element-ui",
 "styleLibraryName": "theme-chalk"
}
```
复制代码

而后引入部分组件，这样一来，就不须要引入样式了，插件会帮咱们处理。

// main.js
import Vue from 'vue'
import { Dialog, Loading } from 'element-ui'
 
Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
复制代码

// 而后正常使用组件

1.2 mint-ui

因为mint-ui是element-ui的移动端组件，因此它的使用和引入几乎和element-ui同样。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

而后，将.babelrc 修改成：

{
 "presets": [
 ["es2015", { "modules": false }]
 ],
 "plugins": [["component", [
 {
 "libraryName": "mint-ui",
 "style": true
 }
 ]]]
}
复制代码

而后引入部分组件

// main.js
import Vue from 'vue'
import { Toast, MessageBox } from 'element-ui'
 
Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 而后正常使用组件
复制代码

注意，element-ui和mint-ui不能同时在.babelrc中进行插件设置，这种状况下，依然能够按需引入，可是不要在.babelrc中配置，在引入的地方同时引入css便可。

1.3 echarts

首先安装babel-plugin-equire

npm i babel-plugin-equire -D

而后，在.babelrc文件中添加该插件

{

"plugins": [
 // other plugins
 ...
 
 "equire"
 ]
}
复制代码

建立一个js文件

// echarts.js
// eslint-disable-next-line
const echarts = equire([
 'tooltip',
 'candlestick',
 'bar',
 'line',
 'axisPointer',
 'legend',
 'grid'
])
export default echarts
 
复制代码

// 业务组件，引入echarts

import echarts from '@/assets/lib/echarts'

// 使用与之前同样

按需加载echarts

解决vue-cli首屏加载慢的问题

2.路由懒加载

这里须要一个插件

vue-router官方推荐syntax-dynamic-import插件，不过它要求同时安装@bable/core^7.0.0，若是你安装了babel-core6，是会有版本冲突的。个人作法以下

npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)
// router.js
const login = () => import('@/components/login')
const router = new VueRouter({
 routes: [
 { path: '/login', component: login }
 ]
})
复制代码

还有一种魔法注释用法

有时候咱们想把某个路由下的全部组件都打包在同个异步块 (chunk) 中。只须要使用命名 chunk，一个特殊的注释语法来提供 chunk name (须要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

3.异步组件

若是组件在页面加载时不须要，只在调用时用到，这时可使用异步组件的写法。仅仅是引入和组件注册写法不一样

// template
<test v-if="showTest"></test>
 
// script
 components: {
 test: () => import('./test') // 将组件异步引入，告诉webpack，将该部分代码分割打包
 },
 methods:{
 clickTest () {
 this.showTest = !this.showTest
 }
 }
复制代码

4.图片的压缩合并

无损压缩图片：https://www.jb51.net/softs/605425.html

若有可能，将图片制做成精灵图

5.CDN加速

在index.html中引入cdn资源

<body>
 
<div id="app">
</div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</body>
...
复制代码

修改 build/webpack.base.conf.js

module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
 
app: './src/main.js'
},
externals:{
 
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex',
'vue-resource': 'VueResource'
},
...
}
复制代码

修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)
复制代码

6.压缩代码

vue-cli已经使用UglifyJsPlugin 插件来压缩代码，能够设置成以下配置：

new webpack.optimize.UglifyJsPlugin({
 compress: {
 warnings: false,
 drop_console: true,
 pure_funcs: ['console.log']
 },
 sourceMap: false
})
复制代码

其中sourceMap: false是禁用除错功能。

若是设为true，在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的状况下仍可进行调试。这个功能虽好，但会大大增长总体资源包的体积，因此将其禁用。

以上就是本文的所有内容，但愿对你们的学习有所帮助，

本次给你们推荐一个免费的学习群，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。对web开发技术感兴趣的同窗，欢迎加入Q群：582735936，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。须要vue项目打包优化视频资料的能够加我