vue + webpack 减小打包体积

接触Vue开发没多久,开发过程中遇到了一些坑,也学到了不少东西。开发完成后发现打包出来的文件都很大,放到线上严重影响网站加载速度。于是上网搜索了一下解决方法。下面是我遇到的坑及解决方法。

webpack 配置

查看打包后的文件发现,我们引用的所有框架文件都被打包了,如果使用到了ElementUI 等,也会一并打包。所以打包后的文件巨大。解决方法就是配置依赖从外部加载,然后通过CDN加载项目需要的文件。首先需要在 webpack基础配置中 ( webpack.base.conf.js ) 进行如下配置(将需要的组件配置为外部加载):

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
},

以上配置加在 module.exports 中,并且注意写法,后面的名称大小写不对也会导致引用失败。

修改index.html

做好如上配置之后,就可以在 index.html 中以加入js cdn链接了,如下:

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.7.2/index.js"></script>

如果你也和我一样,使用到了 ElementUI, 那么需要特别注意的是 ElementUI 的引用必须在 Vue 之后,因为其中引用到了 Vue,如果放前面的话会提示 Vue 未定义。此外比较重要的一点是:

script引入位置不能放在 标签后面,即 body 和 html 之间

这是因为,打包之后,项目依赖的js是append到 body 中 的,这样外部引入的框架依赖就引用不到了,也会报 elementUi 和 Vue 未定义。除非手动更改打包后的js加载逻辑。

其他优化

  • 取消 map 文件生成
    map 文件是方便调试用的,取消生成可以提高打包效率,减小产物体积。在index.js中配置即可,将true改为false,如图:

文章正文图片

  • 将框架 css 也使用 CDN 引入
    使用到的组件较多的话 css 文件也会有很大体积,这时可以将css也以cdn的形式引入,如 ElementUI 的基础样式文件:
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.7.2/theme-chalk/index.css" type="text/css">

具体使用哪个CDN根据项目情况来决定。

It's
欢迎访问本站,欢迎留言、分享、点赞。愿您阅读愉快!
*转载请注明出处,严禁非法转载。
https://www.devsong.org
QQ留言 邮箱留言
头像
引用:
取消回复
提交
涂鸦
涂鸦
热门