Skip to content

Commit 41d4f75

Browse files
cklwblovecklwblove
committed
perf(webpack.dll): 提升构建编译速度
1 parent 2d85d14 commit 41d4f75

16 files changed

+76644
-36
lines changed

‎build/utils.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
'use strict'
2+
const path = require('path')
3+
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
4+
const pkg = require('../package.json')
5+
6+
7+
exports.cssLoaders = function (options) {
8+
options = options || {}
9+
10+
const cssLoader = {
11+
loader: 'css-loader',
12+
options: {
13+
minimize: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'dll',
14+
sourceMap: options.sourceMap
15+
}
16+
}
17+
18+
var postcssLoader = {
19+
loader: 'postcss-loader',
20+
options: {
21+
sourceMap: options.sourceMap
22+
}
23+
}
24+
25+
// generate loader string to be used with extract text plugin
26+
function generateLoaders(loader, loaderOptions) {
27+
const loaders = [];
28+
29+
// Extract CSS when that option is specified
30+
// (which is the case during production build)
31+
if (options.extract) {
32+
loaders.push({
33+
loader: MiniCssExtractPlugin.loader,
34+
options: {
35+
// you can specify a publicPath here
36+
// by default it use publicPath in webpackOptions.output
37+
// 解决图片作为背景引入时，路径不对的问题
38+
publicPath: '../../'
39+
}
40+
})
41+
} else {
42+
loaders.push('vue-style-loader')
43+
}
44+
45+
loaders.push(cssLoader)
46+
47+
if (options.usePostCSS) {
48+
loaders.push(postcssLoader)
49+
}
50+
51+
if (loader) {
52+
loaders.push({
53+
loader: loader + '-loader',
54+
options: Object.assign({}, loaderOptions, {
55+
sourceMap: options.sourceMap
56+
})
57+
})
58+
}
59+
60+
return loaders;
61+
}
62+
63+
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
64+
return {
65+
css: generateLoaders(),
66+
postcss: generateLoaders(),
67+
less: generateLoaders('less'),
68+
sass: generateLoaders('sass', {indentedSyntax: true}),
69+
scss: generateLoaders('sass'),
70+
stylus: generateLoaders('stylus'),
71+
styl: generateLoaders('stylus')
72+
}
73+
}
74+
75+
// Generate loaders for standalone style files (outside of .vue)
76+
exports.styleLoaders = function (options) {
77+
const output = []
78+
const loaders = exports.cssLoaders(options)
79+
for (const extension in loaders) {
80+
const loader = loaders[extension]
81+
output.push({
82+
test: new RegExp('\\.' + extension + '$'),
83+
use: loader
84+
})
85+
}
86+
return output
87+
}
88+
89+
exports.createNotifierCallback = function () {
90+
const notifier = require('node-notifier')
91+
92+
return (severity, errors) => {
93+
if (severity !== 'error') {
94+
return
95+
}
96+
console.log(errors);
97+
const error = errors[0]
98+
99+
const filename = (typeof error.file === 'string') && error.file.split('!').pop()
100+
notifier.notify({
101+
title: pkg.name,
102+
message: severity + ': ' + error.name,
103+
subtitle: filename || '',
104+
// icon: path.join(__dirname, 'logo.png')
105+
})
106+
}
107+
}
108+
109+
exports.resolve = function (dir) {
110+
return path.join(__dirname, '..', dir)
111+
}
112+
113+

‎build/webpack.dll.conf.js

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
const path = require('path');
2+
const utils = require('./utils');
23
const webpack = require('webpack');
34
const CleanWebpackPlugin = require('clean-webpack-plugin');
5+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
6+
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
47

58
// dll文件存放的目录
69
const dllPath = '../public/vendor';
@@ -9,9 +12,26 @@ module.exports = {
912
mode: 'production',
1013
entry: {
1114
// 需要提取的库文件
12-
vendor: ['vue', 'vue-router', 'vuex'],
13-
element: ['element-ui'],
14-
axios: ['axios']
15+
element: ['element-ui', 'element-ui/lib/theme-chalk/index.css'],
16+
axios: ['axios'],
17+
vendor: ['vue', 'vue-router', 'vuex', 'normalize.css']
18+
},
19+
module: {
20+
rules:[
21+
{
22+
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
23+
loader: 'url-loader',
24+
options: {
25+
limit: 10000,
26+
name: '[name].[hash:7].[ext]'
27+
}
28+
},
29+
...utils.styleLoaders({
30+
sourceMap: false,
31+
extract: true,
32+
usePostCSS: true
33+
})
34+
]
1535
},
1636
output: {
1737
path: path.join(__dirname, dllPath),
@@ -20,6 +40,13 @@ module.exports = {
2040
// 保持与 webpack.DllPlugin 中名称一致
2141
library: '[name]_[hash]'
2242
},
43+
optimization: {
44+
minimizer: [
45+
// Compress extracted CSS. We are using this plugin so that possible
46+
// duplicated CSS from different components can be deduped.
47+
new OptimizeCSSAssetsPlugin({})
48+
]
49+
},
2350
plugins: [
2451
// 清除之前的dll文件
2552
new CleanWebpackPlugin(),
@@ -29,6 +56,10 @@ module.exports = {
2956
NODE_ENV: 'production'
3057
}
3158
}),
59+
// extract css into its own file
60+
new MiniCssExtractPlugin({
61+
filename: '[name].dll.css'
62+
}),
3263
// manifest.json 描述动态链接库包含了哪些内容
3364
new webpack.DllPlugin({
3465
path: path.join(__dirname, dllPath, '[name]-manifest.json'),

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,12 @@
8282
"clean-webpack-plugin": "^2.0.1",
8383
"compression-webpack-plugin": "^2.0.0",
8484
"connect": "^3.6.6",
85-
"html-webpack-include-assets-plugin": "^1.0.6",
8685
"husky": "^1.3.1",
8786
"less": "^3.0.4",
8887
"less-loader": "^4.1.0",
8988
"lint-staged": "^8.1.0",
89+
"mini-css-extract-plugin": "^0.6.0",
90+
"optimize-css-assets-webpack-plugin": "^5.0.1",
9091
"progress-bar-webpack-plugin": "^1.12.1",
9192
"runjs": "^4.3.3",
9293
"script-ext-html-webpack-plugin": "^2.1.3",

‎public/vendor/axios-manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"name":"axios_a690c116be06ebbf3952","content":{"./node_modules/axios/lib/utils.js":{"id":3,"buildMeta":{"providedExports":true}},"./node_modules/process/browser.js":{"id":18,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/defaults.js":{"id":53,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/bind.js":{"id":74,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/adapters/xhr.js":{"id":75,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/createError.js":{"id":76,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/isCancel.js":{"id":77,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/Cancel.js":{"id":78,"buildMeta":{"providedExports":true}},"./node_modules/axios/index.js":{"id":162,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/axios.js":{"id":163,"buildMeta":{"providedExports":true}},"./node_modules/is-buffer/index.js":{"id":164,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/Axios.js":{"id":165,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/normalizeHeaderName.js":{"id":166,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/settle.js":{"id":167,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/enhanceError.js":{"id":168,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/buildURL.js":{"id":169,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/parseHeaders.js":{"id":170,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/isURLSameOrigin.js":{"id":171,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/btoa.js":{"id":172,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/cookies.js":{"id":173,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/InterceptorManager.js":{"id":174,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/dispatchRequest.js":{"id":175,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/transformData.js":{"id":176,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/isAbsoluteURL.js":{"id":177,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/combineURLs.js":{"id":178,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/CancelToken.js":{"id":179,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/spread.js":{"id":180,"buildMeta":{"providedExports":true}}}}
1+
{"name":"axios_870d4be7d64cc767f55c","content":{"./node_modules/axios/lib/utils.js":{"id":3,"buildMeta":{"providedExports":true}},"./node_modules/process/browser.js":{"id":18,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/defaults.js":{"id":53,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/bind.js":{"id":74,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/adapters/xhr.js":{"id":75,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/createError.js":{"id":76,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/isCancel.js":{"id":77,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/Cancel.js":{"id":78,"buildMeta":{"providedExports":true}},"./node_modules/axios/index.js":{"id":162,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/axios.js":{"id":163,"buildMeta":{"providedExports":true}},"./node_modules/is-buffer/index.js":{"id":164,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/Axios.js":{"id":165,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/normalizeHeaderName.js":{"id":166,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/settle.js":{"id":167,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/enhanceError.js":{"id":168,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/buildURL.js":{"id":169,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/parseHeaders.js":{"id":170,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/isURLSameOrigin.js":{"id":171,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/btoa.js":{"id":172,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/cookies.js":{"id":173,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/InterceptorManager.js":{"id":174,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/dispatchRequest.js":{"id":175,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/transformData.js":{"id":176,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/isAbsoluteURL.js":{"id":177,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/combineURLs.js":{"id":178,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/CancelToken.js":{"id":179,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/spread.js":{"id":180,"buildMeta":{"providedExports":true}}}}

‎public/vendor/axios.dll.js

Lines changed: 1878 additions & 2 deletions
Large diffs are not rendered by default.

‎public/vendor/element-icons.535877f.woff

27.5 KB
Binary file not shown.

‎public/vendor/element-icons.732389d.ttf

54.6 KB
Binary file not shown.

‎public/vendor/element-manifest.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎public/vendor/element.dll.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)