。xlsx文件瘦身

chainWebpack(配置){

config . optimization . minimizer(“terser”)。点击((args)= & gt；{

？args[0]. terser options . compress . drop _ console = true

？返回参数

})

}

通过配置vue-cli，一些不必要的软件包将从软件包文件中排除。

比如让webpack解包vue xlsx和element？

首先找到vue.config.js，然后添加外部文件，如下所示:

当我们再次运行包时，我们会发现包的大小已经大大减小了:包目标文件中不再有三个包。

？但是我们还是要用这些包，可以通过CDN访问。

开发环境时，文件资源仍然可以从本地node_modules中取出，但只有项目上线时，才需要使用外部资源。此时我们可以用环境变量来区分。详情如下:

在vue.config.js文件中:

让外部= {}

设cdn = { css: []，js: [] }

constis production = process . env . node _ env = = ' production '//判断是否是生产环境。

if (isProduction) {

？外部= {

？/**

？*外部对象属性分析:

？*“包名”:“项目中引入的名称”

*/

？vue': 'Vue '，

？元素-ui ':'元素'，

？xlsx': 'XLSX '

？}

？cdn = {

css: [

？/element-ui/lib/theme-challenge/index . CSS '//element-uicss样式表

],

js: [

？// vue必须先！

？/vue@2.6.12/dist/vue.js '，// vuejs

？/element-ui/lib/index.js '，// element-ui js

？/NPM/xlsx @ 0.16.6/dist/xlsx . full . min . js '，// xlsx

]

？}

}

然后通过html-webpack-plugin注入index.html:

chainWebpack(配置){

？config.plugin('preload ')。点击(()= & gt[

{

？rel:'预载'，

？fileBlacklist: [/\。map$/，/hot-update\。js$/，/runtime\..*\.js$/]，

？包括:“初始”

}

？])

？//注入cdn变量(打包时执行)

？config.plugin('html ')。tap(args = & gt；{

参数[0]。cdn = cdn //为插件配置cdn。

返回参数

？})

？//省略其他...

}

找到public/index.html，通过配置CDN Config依次注入css和js。

修改标题的内容，如下所示:

& lt！-介绍风格->；

？& lt% for(htmlwebpackplugin . options . cdn . CSS的var CSS){ % & gt；

& ltlink rel = " stylesheet " href = " & lt%=css% >& gt

& lt% } % & gt

& lt！-介绍JS-& gt；

& lt% for(htmlwebpackplugin . options . cdn . js的var js){ % & gt；

？& ltscript src = " & lt%=js% >& gt& lt/script & gt；

& lt% } % & gt