【vue】优化白屏即首次加载时间,针对vue2+webpack

webpack与vue有关配置

1 打包分析插件-webpack-bundle-analyzer

安装

npm i webpack-bundle-analyzer -D

配置

在对应的webpack配置文件(webpack.prod.conf.js)中添加此插件

if (config.build.bundleAnalyzerReport) {
   
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

运行

npm run build

2 cdn引入部分第三方包

根据BundleAnalyzerPlugin插件分析,我们可以选择一些npm包进行cdn引入来减小打包体积从而提升加载速度

webpack配置

在对应的webpack配置文件(webpack.base.conf.js)的module.exports 中的externals添加要忽略的包
例如:

module.exports = {
   
  externals: {
   
    'BMap': 'BMap',
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'vant': 'vant',
    'mockjs': 'mockjs',
    'vue-awesome-swiper':'VueAwesomeSwiper'
  },
}
//key值为npm包名,value值为cdn的js文件中export的名称(需要阅读js文件获得**这个一定要注意)
//有时候会报错,是因为cdn引入的包有依赖关系,比如vue-router必须依赖vue,所以要先加载vue才可以

index.html引入CDN

在index.html文件的head中引入有关js文件,不影响进度的js或css文件可以放入body中,不阻塞html展示

<head>
   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js">script>
   <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.4/vue-router.min.js">script>
   <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.4/axios.min.js">script> 
   <script src="https://cdn.bootcdn.net/ajax/libs/vant/2.12.48/vant.min.js">script>
   <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.14.7/vconsole.min.js"

你可能感兴趣的:(vue,webpack,vue.js,javascript)