vue3.x脚手架首页加载慢的问题(2019.10)

787 阅读2分钟

项目中遇到vue首页加载十几秒的问题,一下几种方法,亲测好用,首页加载2秒左右。

1.路由懒加载

{

    path: '/chinaWine',
    
    name: 'chinaWine',
    
    component: resolve => require(['./views/chinaWine'], resolve)

},

此方法会把原本打包到一个app.js文件分开成多个js文件打包,这样会减小单个文件的大小,但是不会减小整个js文件夹的大小。

通过这种方式可以做到按需加载,只加载单个页面的js文件。

2、打包文件中去掉map文件

打包的app.js过大,另外还有一些生成的map文件。先将多余的map文件去掉,

找到config文件夹下index.js文件,把这个build里面的productionSourceMap改成false即可

3、CDN引入第三方库

在项目开发中,我们会用到很多第三方库,如果可以按需引入,我们可以只引入自己需要的组件,来减少所占空间,

但也会有一些不能按需引入,我们可以采用CDN外部加载,

在index.html中从CDN引入组件,去掉其他页面的组件import,修改webpack.base.config.js,

在externals中加入该组件,这是为了避免编译时找不到组件报错。

4、终极大招,gzip打包

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。

html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。

1、npm i -D compression-webpack-plugin

2、在vue.config.js中配置

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: config => {

if (process.env.NODE_ENV === 'production') {

return {

plugins: [new CompressionPlugin({

test: /\.js$|\.html$|\.css/,

threshold: 10240,

deleteOriginalAssets: false

})]

}

}

},

3、在NGINX中配置

http {

gzip  on;

gzip_min_length    1k;

gzip_buffers        4 8k;

gzip_http_version  1.0;

gzip_comp_level    8;

gzip_proxied        any;

gzip_types          application/javascript text/css image/gif;

gzip_vary          on;

gzip_disable        "MSIE [1-6]\.";

#以下的配置省略...

}

nginx -s reload :修改配置后重新加载生效