vue项目提取第3方插件及公共代码至单独文件

使用vue开发项目,项目打包后发现 chunk-vendors.xxx.js体积总是很大,项目大点会超过1M,之前一直想把这个问题解决,但却不知道怎么解决,最近有位掘金大佬写了篇文章把我这么久以来的困扰解开了,跟着大佬的解决方案走了一遍,成功的把一些第3方依赖(如vuex、element ui、axios)及公共代码提取出来了,为了记录下困扰我已久的问题被解决所以就写了这篇文章。
掘金大佬文章: Vue多页面优化踩坑记录

vue项目提取第3方插件及公共代码至单独文件_第1张图片

项目依赖

功能 依赖文件
es6语法转es5语法 npm i babel-loader @babel/core @babel/preset-env -D
es6新api转换 npm install --save @babel/polyfill
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime-corejs3
webpack npm install webpack webpack-cli -D
清除文件插件 npm install clean-webpack-plugin -D
将JavaScript或者CSS插入
到webpack插件生成的HTML中
npm install add-asset-html-webpack-plugin -D

生成.babelrc文件,并写入如下代码:

{  
"presets": [  
   [ "@babel/preset-env" ]
 ], 
 "plugins": [
   [ "@babel/plugin-transform-runtime",
     { "absoluteRuntime": false,
     "corejs": 3,
     "helpers": true,
     "regenerator": true,
     "useESModules": false
     }
    ] 
   ]
 }  

使用

1.将webpack.dll.config.js.babelrc文件拷贝至项目跟目录(文件在GitHub上)

2.修改webpack.dll.config.js中的代码

1.修改dll文件存放目录(根据需要修改,也可以不修改)  
2.修改entry

3.在vue.config.js中的configureWebpack中添加生成dll文件配置
4.在package.json文件中的script添加一条命令,"dll": "webpack -p --progress --config .webpack.dll.config.js"

打包

在执行打包命令前一定要先执行生成dll文件的命令,即先执行npm run dll,然后在执行npm run build

运行npm run dll命令后会在/public/dll目录中生成一个xxx.dll.jsxxx.manifest.json文件,其中xxx就是webpack.dll.config.js
entry中的key

GitHub项目地址

vue项目提取第3方插件及公共代码至单独文件:vue-extract-plugins

你可能感兴趣的