Webpack Vue瘦身,感受快到飞起的加载速度!

症结

  • 在利用webpack脚手架搭建vue项目后,往往最终打包的.js和.css文件过于庞大,造成首次加载的时候白屏时间过长,影响用户体验,下图为未经任何优化直接npm run build之后的情况:
Webpack Vue瘦身,感受快到飞起的加载速度!

其中vendor.js文件高达1.16MB,平均白屏时间超过10秒。

解决方案

  • 使用CDN剥离JS文件,让他们独立加载:
  1. 找出那些巨头JS引用,如本例中的:Vue、Vue-Router、Element-UI、Quill等。
  2. 访问https://www.bootcdn.cn/,找到这些文件的CDN引用

(当然你也可以选择其他CDN网站,本例使用bootcdn.cn)

3. 修改 项目根目录下的 index.html

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<!--在meta这一行下面添加刚才在cdn网站找到的引用,注意版本号要和你的package.json里的一致 -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<link href="https://cdn.bootcss.com/quill/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/quill/1.3.7/quill.min.js"></script>
<script src="/static/js/vue-quill-editor.js"></script>

4.修改 /build/webpack.base.conf.js 文件

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
// 在这个位置添加externals设置:
  externals: { 
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT', //注意element-ui的引用时纯大写
    'vue-quill-editor': 'VueQuillEditor',
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  1. 回到Vue源文件里面,删除关于Vue、Vue-Router、element-ui相关的import和Use:
//import ElementUI from 'element-ui'
//import Vue from 'vue'
//import Router from 'vue-router'
//Vue.use(ElementUI)
//Vue.use(Router)
//Vue.use(VueQuillEditor)

将这些代码通通注释掉,因为在externals里面已经做过声明了,如果在Vue文件里再声明一次,将会报重复引用的错误。

  1. 完成后,让我们再执行一次npm run build看看效果,发现果然大大地瘦了一次身,如图:
Webpack Vue瘦身,感受快到飞起的加载速度!

vendor.js从1.2M瞬间减肥减到了109K

开启zip压缩模式,进一步瘦身

  1. 找到:/config/index.js,将productionGzip改为true
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],
  1. 检查服务器端有没有打开gzip,这里以nginx为例,检查nginx.conf文件:
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;
  1. 再次运行npm run build,效果如下:
Webpack Vue瘦身,感受快到飞起的加载速度!

可以看到vendor.js文件被狠狠地压缩到只有34Kb的程度

  • 经过优化后,首页平均加载时间从10秒压缩到了2秒左右,优化效果十分明显。
posted @   鼓舞飞扬  阅读(645)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示