Vue-Cli项目优化操做

起源

由Vue-Cli（2.X）生成的Vue项目中存在着首屏加载过慢，编译资源过大等问题，主要针对这些问题对项目进行相应的优化，提高项目响应速度，优化项目性能。

操做

路由懒加载

在Vue-router官方文档中有针对懒加载的介绍,主要是将整个大的js进行切片，对当前路由的资源进行一个按需加载。在Vue-cli生成的路由组件引用方法是这样的

import HelloWorld from '@/components/HelloWorld'
复制代码

只需将组件的引用方式改成

const HelloWorld = () =>
    import ('@/components/HelloWorld')
复制代码

而后从新编译便可

开启预加载/优先加载

使用webpack插件 PreloadWebpackPlugin进行预加载prefetch和优先加载preload。 主要作的是用preload加载vendor、manifest与app三个js而用prefetch去加载全部路由对应的文件。 首先要 安装插件

npm install --save preload-webpack-plugin
复制代码

在webpack.prod.conf.js中修改，加入预加载的代码 (注意放在 new HtmlWebpackPlugin() 的下面)

new PreloadWebpackPlugin({
  rel: 'prefetch',
}),
new PreloadWebpackPlugin({
  rel: 'preload',
  as(entry) {
    if (/\.css$/.test(entry)) return 'style'
    return 'script';
  },
  include: ['app', 'vendor', 'manifest']
})
复制代码

开启GZip

gzip,使用gzip压缩资源能够更快地加载资源。客户端http请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。当客户端请求到服务端的时候，服务器解析请求头，若是客户端支持gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照本身的方式解析，在http响应头，咱们能够看到content-encoding:gzip，这是指服务端使用了gzip的压缩方式。

启用gzip,在nginx的site-conf中开启gzip

server {
    gzip on;
    gzip_types       text/xml text/css text/plain text/javascript application/javascript application/x-javascript;
}

复制代码

webpack处理，须要先安装插件

npm install --save-dev compression-webpack-plugin
复制代码

而后在config的index.js中 ，将productionGzip改成true，开启Gzip压缩。

PS：若是编译报错,则安装compression-webpack-plugin@1.1.12版本

对第三方工具库进行额外处理

本项目中Vender中主要是Vue,Vue-router,axios等固定依赖的代码,工具库的代码通常不会改动，因此能够将这些工具库的代码抽出来,单独走CDN加载以减小编译JS文件的大小。 具体操做 : 选择相应的工具库版本的cdn,加入到index.html中

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
复制代码

以后去到webpack中修改相应的打包配置

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios'
}
复制代码

ps:假若main.js中有关于公共库的引用 请记得清除掉 这时再去编译 打包 就会发现编译的Vender.js小了不少