记录一次vue打包优化

进公司就接手了一个“二手”简单的管理后台系统，随着公司的业务拓展，这个管理后台已经不是当初的小可爱了，变成了油腻的死肥仔了。

然后就出现了各种各样的后遗症。。。

首先记录一次优化vue打包优化。

webpack极大的简化了前端自动化配置，但是打包速度实在是不如人意，首先我想到了

优化方式之一：CDN

原理：上线依赖（通常放在package.json>dependencies）不参与打包构建，全部通过cdn引入

测试结果： 经过项目测试，节省不少时间。

// index.html

 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 
 <script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
 <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.js"></script>
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 
 <!--<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/echarts/4.0.4/echarts.min.js"></script>-->
 <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

// build > webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  externals:{
  // '引入资源名': '对外资源名'
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex',
    'element-ui': 'ELEMENT',
    'echarts': 'echarts',
  },
}

这样三方库就不会打包进vendor。

** 使用引入资源是必须和 externals 暴露的变量一致。 **

具体参考 webpack 外部扩展 传送门

优化方式之二：分包

// router > index.js

//这是以前的引入方式
import Label from '@/components/label'
import Login from '@/pages/test1'
import Home from '@/pages/test2'

//现在按需加载
const Label = r => require.ensure([], () => r(require('@/components/Label')), 'chunkname1')
const Login = r => require.ensure([], () => r(require('@/pages/test1')), 'chunkname2')
const Home = r => require.ensure([], () => r(require('@/pages/test2')), 'chunkname3')

这样修改之后，app.js会被分割为3个js文件，对应的router加载对应的js，缓解首屏渲染速度。

优化方式之三：压缩代码

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

// build > webpack.prod.conf.js

compress: {
  warnings: false,
  drop_console: true,
  pure_funcs: ['console.log']
 },
 sourceMap: false
})

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

如果设为true，在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。这个功能虽好，但会大大增加整体资源包的体积，所以将其禁用。

目前只优化了这些，有不对的或者遗漏的，还请各位轻点喷。。。