vue-cli 通过extends引入 CDN外部资源

使用 vue 的 webpack 模版开发项目时，使用 npm install安装的各种组件和依赖到本地
默认情况下通过import语法导入的第三方依赖包最终会被打包合并到同一个文件中
从而导致打包成功后单文件体积过大的问题
为了解决问题可以通过webpack的externals节点配置并加载外部的CDN资源
凡是声明在externals中的第三方依赖包都不会被打包

未配置前打包的大小 最下面有配置完之后再次打包的大小
在这里插入图片描述
通过vue-cli 3.0 生成的项目默认是隐藏了所有的webpack配置项
如果有修改webpack默认配置的需求可以在项目根目录下按需创建vue.config.js文件
从而对项目打包发布过程做自定义配置
项目根目录新建 vue.config.js
这里加了chainWebpack 自定义打包入口
chainWebpack步骤
在src的文件目录下新建 main-prod.js 和main-dev.js把原本main.js的所有内容复制到新建的js里
目前两个文件里面的内容一模一样删掉原本的main.js

在vue.config.js加入以下chainWebpack的配置

module.exports = {
    chainWebpack: config => {
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')
        })
        // 开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

然后再把 externals 的配置加上这里加的是项目中所使用引入的包

config.set('externals', {
     vue: 'Vue',
     'vue-router': 'VueRouter',
     axios: 'axios',
     lodash: '_',
     echarts: 'echarts',
     nprogress: 'NProgress',
     'vue-quill-editor': 'VueQuillEditor'
 })

加完如下
在这里插入图片描述
然后在main-prod.js 文件中删除引入的包的css文件
根据项目不同这里删除和引用的文件也是不一样的

然后在需要在public/index.html文件的头部添加CDN资源引用
添加的引用就是在 config.set 中的文件

最后在 vue ui 面板运行build任务打包成功文件大小就小了很多
在这里插入图片描述

Twelve--

发布了41 篇原创文章 · 获赞 2 · 访问量 1836

私信关注

vue-cli 通过extends引入 CDN外部资源

猜你喜欢