HTML5教程

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

本文主要是介绍vue项目提取第3方插件及公共代码至单独文件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
使用vue开发项目，项目打包后发现chunk-vendors.xxx.js体积总是很大，项目大点会超过1M，之前一直想把这个问题解决，但却不知道怎么解决，最近有位掘金大佬写了篇文章把我这么久以来的困扰解开了，跟着大佬的解决方案走了一遍，成功的把一些第3方依赖(如vuex、element ui、axios)及公共代码提取出来了，为了记录下困扰我已久的问题被解决所以就写了这篇文章。
掘金大佬文章： Vue多页面优化踩坑记录

QQ截图20200114144346.png

项目依赖

功能 依赖文件
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.js和xxx.manifest.json文件，其中xxx就是webpack.dll.config.js
中entry中的key

GitHub项目地址

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

这篇关于vue项目提取第3方插件及公共代码至单独文件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航