打开控制台,果然发现了两个大型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'
},
从而防止资源被打包到项目中