vue项目打包优化!!!
提问
我们是否需要把第三方的库全部打包到自己的项目中呢？
不需要！
xlsx这个包就很大(715K)，而且这类插件长期不需要我们进行更新，所以没有必要打包进来！
思路
打包时，不要把这些包打进来
从网络上引入这些包
webpack配置排除打包-打包瘦身
目标
通过配置vue-cli把一些平常不需要用的包排除在打包文件之外。
例如:让 webpack 不打包 vue xlsx 和 element
使用方式
先找到 vue.config.js， 添加 externals 项，具体如下：
configureWebpack: {
// 配置单页应用程序的页面的标题
// 省略其他....
externals: {
/**
* externals 对象属性解析。
* 基本格式：
* '包名' : '在项目中引入的名字'
*
*/
'vue': 'Vue',
'element-ui': 'ElementUI',
'xlsx': 'XLSX'
},
resolve: {
alias: {
'@': resolve('src')
}
}
}
复制代码复制代码再次运行打包，我们会发现包的体积已经大幅减小：上面的三个包已经不在打包的目标文件中了。
webpack配置排除打包-引用网络资源
目标
做相关配置：通过公共网络资源方式把除在外的包引入在index.html
具体配置-在生产环境时生效
注意，在开发项目时，文件资源还是可以从本地node_modules中取出，而只有项目上线了，才需要去使用外部资源。此时我们可以使用环境变量来进行区分。具体如下：
在**vue.config.js**文件中：
let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
externals = {
/**
* externals 对象属性解析：
* '包名' : '在项目中引入的名字'
*/
'vue': 'Vue',
'element-ui': 'ELEMENT',
'xlsx': 'XLSX'
}
cdn = {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
],
js: [
// vue must at first!
'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
'https://unpkg.com/element-ui/lib/index.js', // element-ui js
'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
]
}
}
作者：林不二
链接：https://juejin.cn/post/7026542077320593415