vue项目打包后文件过大的优化方法

1、懒加载

打包部署项目时javaScript包会非常大，影响页面加载，路由懒加载是最常用和有效的方法，如果使用Babel，需要添加syntax-dynamic-import插件，才能使Babel正确地解析语法，命令如下：

cnpm install @babel/plugin-syntax-dynamic-import --save-dev
1.1、路由懒加载

方法一
const Foo = () => import ('./Foo.vue')
const router = new VueRouter ({
  routes: [
    {path: '/foo', component: Foo}
  ]
})
1.2、把组件按组分块

如果需要将所有组件打包在同个异步块(chunk)中，需要使用命名chunk，用特殊的注释语法提供chunkname（需要Webpack >2.4）

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

const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
2、cdn加载

将依赖包用cdn方式加载，可减少vendor的大小，在不占用自己带宽的情况下更快加载页面，开始可使用免费的cdn bootcss，在index.html中加入：

<link href="https://cdn.bootcss.com/element-ui/2.4.11/theme-chalk/index.css" rel="stylesheet">

<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/element-ui/2.4.11/index.js"></script>

在webpack.base.conf.js中对引入包进行配置，不再将依赖打包到vendor，实例如下：

module.exports = {
           context: path.resolve(__dirname, '../'),
           entry: {
              // app: './src/main.js'
              app: ["babel-polyfill", "./src/main.ts"]
           },
           externals: {
              'vue': 'Vue',
              'vue-router': 'VueRouter',
              'element-ui': 'ELEMENT',
          },
     }
3、关闭map文件

项目打包后js中会自动生成一些map文件，关闭map文件的生成可减小js文件的大小，需要在config/index.js文件中build下修改，具体如下：

productionSourceMap: false

这种方法的缺点：项目打包后代码都是经过压缩加密的，有了map文件就像未加密的代码一样，准确的输出是哪一行那一列有错，方便查找问题，但如果关闭map文件，如果运行报错就无法定位错误。
4、代码压缩

安装依赖并将Gzip打开，开启Gzip压缩

npm install --save-dev compression-webpack-plugin@1.1.2 // 版本过高会出现问题

在nginx配置文件添加如下代码：

http:{ 
            gzip on; 
            gzip_static on;
            gzip_buffers 4 16k;
            gzip_comp_level 5;
            gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

}