项目打包提取公共模块

背景：项目加载第三方包过多，导致上线前构建速度过慢，于是进行将第三方包与项目代码进行分离。

一、实时方案一，将第三方包单独构建为一个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替换