背景:项目加载第三方包过多,导致上线前构建速度过慢,于是进行将第三方包与项目代码进行分离。
一、实时方案一,将第三方包单独构建为一个xx.js文件,在后续代码构建的时候,第三方构建包不参与打包过程,节省打包时间。
1、新建 webpack.dll.conf.js ,进行单独打包配置,将下列库单独打包
1.1、 vue、vue-router、axios、element-ui、ag-gird、vue-axios、vue-quill-editor、echarts、vue-print-nb
1.2、依赖:"clean-webpack-plugin": "^2.0.2", "terser-webpack-plugin": "^1.3.0", "webpack-cli": "^3.3.12" ,安装下载依赖
2、mack.info.js 文件进行读取当前分支信息、将该信息在上面文件中写入打包文件
3、配置打包之后的文件输出位置,package.json
4、修改package.json 进行命令配置
5、npm run dll 进行第三方库单独打包构建
6、将打包之后的文件,在build的时候自动插入到index.html文件之中
6.1、依赖:"add-asset-html-webpack-plugin": "^3.1.3",
二、实时方案二,将第三方包以CDN的方式进行引入,无需单独打包公共库文件,节省打包时间
1.新建需要引入的CDN链接配置文件(cdn.static.config.js)
2.在vue.config.js中配置 htmlWebpackPlugin 新增cdns变量配置
3.将cdns中的cdn链接插入到public/index.html中
4.在vue.config.js中配置打包忽略第三方包[key: value] ,其中Value 是在项目中使用该第三方包的实例变量
5.替换项目中的 去除main.js中的 import vue、vuex、vue-router、element-ui、echarts
5.1 main.js
5.2 router.js
5.3 store
5.4 vuex替换
项目打包提取公共模块
最新推荐文章于 2022-11-29 15:10:07 发布