https://www.jianshu.com/p/6262772bdc9c
1.组件异步加载 import xxx from "./xxx.vue" 改为 'my-component':()=>import('./my-async-component')
2.在webpack打包的过程中,将多余文件去掉,如map文件,即在config/index.js中将productionSourceMap的值修改为false,就可以在编译时不生成.map文件了
3.路由懒加载
{
name: 'testPage',
path:'testPage',
component(resolve) {
require(['page/views/testPage/main.vue'], resolve)
}
},
改为
{
path: 'testPage',
name: 'testPage',
component: () => import('page/views/testPage/mian'),
},
4、vue-cli开启打包压缩和后台配置gzip访问
首先安装插件:compression-webpack-plugin
在 config/index.js中将productionGzip 改为 true
设置gzip
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: true
})
)
ginx开启gzip
Gzip on;
gzip_min_length 1024;
gzip_buffers 4 8k;
gzip_types text/plain application/x-javascript text/css application/xml;
查看各个依赖打包后大小
package.json scripts添加
"build-report": "npm run build --report"
运行
npm run build --report