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

aiqqvb

已于 2022-11-17 18:10:42 修改

阅读量686

点赞数

分类专栏： vue 文章标签： webpack vue.js javascript

于 2022-11-17 18:00:07 首次发布

本文链接：https://blog.csdn.net/aiqqvb/article/details/127907407

版权

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"

最低0.47元/天解锁文章

aiqqvb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue】优化白屏即首次加载时间,针对vue2+webpack

在对应的webpack配置文件(webpack.base.conf.js)的module.exports 中的externals添加要忽略的包。此处有chunks与excludeChunks需要注意，chunks如果配置了，路由懒加载将会失效，所以不宜配置chunks。注意：不同包要修改的方式不同，需要研究后再修改，例如vant，vue.use(vant.button)等。至此，原本需要7-8秒才可以加载出来的页面，只需要0-1秒就可以加载出来（此次研究断断续续有两周的时间）将js中的css文件分离出来。
复制链接

扫一扫

专栏目录