webpack的externals优化项目 - for vue

用webpack打包项目的时候,如果项目体量比较大,往往打出来的包vender.js会很大,导致首屏加载慢,这时候用webpack提供的externals属性,像vue.js 、vuex.js 、vue-router.js 这些外部库,基本不会变的,如果将它们独立出来单独加载就能利于浏览器的缓存机制,不用每次都重新加载这些库js,并且大大的减少了打包的vendor.js文件

优化的步骤有两步,以抽离项目中vue和vue-router为例。

第一步:配置externals

这个配置最好在生产环境的时候配置,如果静态资源是cdn引入的话本地开发依赖网络。

//webpack.config.base.jsconst 
webpack = require("webpack");
const path = require("path");
const MODE = 'development'module.exports = {
    mode: MODE,
    entry: {
        index: path.resolve(__dirname, '../src/main.ts')
    },
    ...
    externals: process.env.NODE_ENV === 'production' ? {
        "vue": "Vue",
        'vue-router': 'VueRouter'
    } : {}
    ...}

说一下这里的键值对配置,key值vue这个值是import from 'vue'时用的名称,value值是为Vue,这个值是通过script方式引入js库后它的全局变量 ,这时vue库的全局变量是首字母大写的 'Vue'。

第二步:引入静态资源

用externals配置后,因为vender.js里面没有了静态资源文件,所以需要额外引入,可以在index.html引用cdn引入或者本地引入。cdn引入注意引用官方的,不然引用不当会导致线上项目挂了(之前入过坑...)。

//cdn
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> 
<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js"></script>

//本地
<script src="./static/vue.min.js"></script>
<script src="./static/vue-router.min.js"></script>
配置完成

如果你是CDN引入的会发现打包出来的vender.js体积会变小,减少的部分就是静态资源的大小。

不过使用externals属性要注意的是,虽然可以优化首屏加载速度,但是由于静态资源分离,也会增加http请求数量。所以如果是小项目,最好就不要用externals属性,因为小项目打包的出来的vender.js体积不大,建议项目体量较大的项目再用比较合适。

之前配置的时候有个小插曲,以为需要将项目中import静态资源的语句全部去掉,有点尴尬,现在想想实在是有点逗,所以如果你在配置过程中碰到类似问题,可以跳过这个坑。



作者:叉叉酱
链接:https://www.jianshu.com/p/f6b3f097a56d
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。