vue首页加载优化

àì夳堔傛蜴生んèń 2022-01-23 23:13 331阅读 0赞

vue  首页加载过慢优化方案  
1.异步路由加载，如下形式  
    \{  
            path:  '/',  
            name:  'Index',  
            component:  ()  =>  import('@/components/index/index')  
        \},  
  
2.在body中采用cdn引入  
<script  src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>  
<script  src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>  
在build里面webpack.base.conf.js里面module.exports下配置externals:\{'vue':  'Vue','axios':'axios'\},  
去掉main.js里面的引入  
  
3.去掉打包生成的map文件  
config里面的index中productionSourceMap:  false,改为false  
  
4.gizp打包  
config里面的index中productionGzip:  true,改为true,  
安装  compression-webpack-plugin：npm  install  compression-webpack-plugin  --save-dev  
build/webpack.prod.conf.js中配置  
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  
        \})  
    )  
\}  
然后nginx的配置  
修改服务器的nginx  配置，找到conf目录下的nginx.conf  ,开启gzip,并设置gzip的类型，如下：  
gzip    on;  
gzip\_types  text/plain  application/x-javascript  application/javascript  text/css  application/xml  text/javascript  application/x-httpd-php  image/jpeg  image/gif  image/png;  
重启nginx：nginx  -s  reload

同学总结的，很好