项目部署后首次加载缓慢问题

打开控制台，果然发现了两个大型js文件，啊啊啊sad…

所以要怎么压缩呢，下面是我的解决方法 （下面几个过程都是独立可行的，当然都用上效果当然是最好的） ：

1.使用路由懒加载

• 非懒加载：{path: ‘/index’,name: ‘index’,component: Index}
• 懒加载：component: resolve => require([’@/components/index/index’], resolve)

2.打包时，将多余文件如map文件去掉

• 将config文件夹里的index.js文件中的productionSourceMap 设置为false

3.开启gzip压缩资源文件

• 安装依赖

npm install --save-dev compression-webpack-plugin@1.1.11

• 将config文件夹里的index.js文件中的productionGzip 设置为true
• 后端nginx启用gzip模式

  • 在http中配置如下代码

    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6; #压缩级别
    gzip_buffers 16 8k;
    #gzip_http_version 1.1;
    gzip_static on;
    gzip_min_length 100; #不压缩临界值
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    

4.cdn引入模块

• 将不易变动的模块如 vue，cubi-ui,不使用import的方式引入改用cdn
• 然后在webpack.base.conf.js文件中加入

externals: {
  'vue': 'Vue',
  'cube-ui': 'Cube'
},

从而防止资源被打包到项目中

压缩后文件大小，加载速度瞬间快了很多hha~