Comments (1)
vue-cli3 DllPlugin 实现预编译,提升构建速度
先安装
npm install webpack-cli --save-d
独立出一套webpack配置webpack.dll.conf,用dllPlugin定义要打包的dll文件;这里我在根目录下新建webpack.dll.conf.js 内容如下
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: {
vendor: [
"vue-router/dist/vue-router.esm.js",
"vuex/dist/vuex.esm.js",
"axios"
]
},
output: {
path: path.join(__dirname, "public/vendor"),
filename: "[name].dll.js",
library: "[name]_[hash]" // vendor.dll.js中暴露出的全局变量名
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, "public/vendor", "[name]-manifest.json"),
name: "[name]_[hash]",
context: process.cwd()
})
]
};
注意一定要把生成的dll放到public中或者自己去配置 publicPath
package.json中定义运行webpack.dll.conf.js的命令
{
···
"scripts": {
"serve": "npm link typescript && vue-cli-service serve",
"dll": "webpack -p --progress --config ./webpack.dll.conf.js",
···
},
···
}
运行npm run dll命令生成dll
index.html中加载生成的dll文件
<script src="./vendor/vendor.dll.js"></script>
vue.config.js的配置文件中添加
const webpack = require("webpack");
module.exports = {
···
configureWebpack: {
plugins: [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require("./public/vendor/vendor-manifest.json")
})
]
}
···
}
from blog.
Related Issues (20)
- 函数式编程记录 HOT 2
- VUE MVVM原理和实现 HOT 2
- Vue Router原理和实现
- React Redux源码
- [php] YII2学习 HOT 2
- [php] mysql HOT 1
- [php] yii2 mysql HOT 2
- redux react-redux HOT 3
- 常用mysql
- [webpack ]多项目入口改造 HOT 7
- [linux] 内存清理
- lnmp服务器常见问题收集
- **所有城市经纬度坐标json以及对应的省市县3级联动json HOT 1
- 翻墙
- [linux] 日常记录
- pwa HOT 2
- 缓存一些记录 HOT 2
- npm HOT 1
- echarts 一些用法
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog.