Skip to content

Commit f7bcbc8

Browse files
author
yangfan19
committed
18-提取页面的公共资源
1 parent 71385fe commit f7bcbc8

20 files changed

+10655
-0
lines changed

‎webpack-18/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env", "@babel/preset-react"]
3+
}

‎webpack-18/.gitignore

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/idea
6+
/dist
7+
/es
8+
/lib
9+
10+
# misc
11+
.idea
12+
.vscode
13+
.DS_Store
14+
15+
16+
npm-debug.log*
17+
yarn-debug.log*
18+
yarn-error.log*

‎webpack-18/README.md

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
# webpack-18
2+
3+
## 提取页面的公共资源
4+
5+
在使用 react、vue 的时候 我们可以把当前的引入库进行分离，直接采用 CND 的模式，这样打包的速度和性能都会有很大的提升。
6+
7+
<br />
8+
9+
### html-webpack-externals-plugin
10+
11+
需要手动在页面中引入公共资源的 CDN 地址，具体的配置如下：
12+
13+
```html
14+
<body>
15+
<div id="root"></div>
16+
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
17+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
18+
</body>
19+
```
20+
21+
```javascript
22+
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
23+
new HtmlWebpackExternalsPlugin({
24+
// 提取公共资源
25+
externals: [
26+
{
27+
module: 'react',
28+
entry: 'https://unpkg.com/react@16/umd/react.production.min.js',
29+
global: 'React',
30+
},
31+
{
32+
module: 'react-dom',
33+
entry: 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
34+
global: 'ReactDOM',
35+
},
36+
],
37+
}),
38+
39+
```
40+
41+
<br />
42+
43+
### webpack4 内置的 SplitChunksPlugin
44+
45+
也可以使用 webpack4 内置的 SplitChunksPlugin 进行分离 ,
46+
47+
```javascript
48+
// weboack.config
49+
50+
// 在html打包的时候 手动引入vendors模块即可
51+
...
52+
plugins:[
53+
new HtmlWebpackPlugin({
54+
template: path.join(__dirname, `src/${pageName}/index.html`),
55+
filename: `${pageName}.html`,
56+
chunks: ['vendors', pageName],
57+
inject: true,
58+
minify: {
59+
html5: true,
60+
collapseWhitespace: true,
61+
preserveLineBreaks: false,
62+
minifyCSS: true,
63+
minifyJS: true,
64+
removeComments: false,
65+
},
66+
})
67+
],
68+
optimization: {
69+
splitChunks: {
70+
cacheGroups: {
71+
commons: {
72+
test: /(react|react-dom)/,
73+
name: 'vendors',
74+
chunks: 'all',
75+
},
76+
},
77+
},
78+
},
79+
80+
```
81+
82+
但是 SplitChunksPlugin 强大在于可以在项目中分离公共的方法引入的次数，在项目根目录中创建一个 common/index.js ；在 index 和 search 模块中分别引入当前的 splitChunks 会根据配置是否打包当前的文件
83+
84+
```javascript
85+
// weboack.config
86+
87+
// 在html打包的时候 手动引入vendors模块即可
88+
...
89+
plugins:[
90+
new HtmlWebpackPlugin({
91+
template: path.join(__dirname, `src/${pageName}/index.html`),
92+
filename: `${pageName}.html`,
93+
chunks: ['commons', pageName],
94+
inject: true,
95+
minify: {
96+
html5: true,
97+
collapseWhitespace: true,
98+
preserveLineBreaks: false,
99+
minifyCSS: true,
100+
minifyJS: true,
101+
removeComments: false,
102+
},
103+
})
104+
],
105+
optimization: {
106+
splitChunks: {
107+
minSize: 0, // 引入的模块的大小，设置为0 有引入就会打包成模块
108+
cacheGroups: {
109+
commons: {
110+
minChunks: 3, // 最少引入的次数
111+
name: 'commons', // 打包的模块
112+
chunks: 'all',
113+
},
114+
},
115+
},
116+
},
117+
118+
```
119+
120+
## 安装的依赖
121+
122+
```shell
123+
124+
npm i html-webpack-externals-plugin
125+
126+
```
127+
128+
<br />
129+
130+
### 相关资源
131+
132+
[html-webpack-externals-plugin](https://www.npmjs.com/package/html-webpack-externals-plugin) <br />[SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/)
133+
134+
<br />

‎webpack-18/common/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function common() {
2+
return '我是公共的JavaScript';
3+
}

0 commit comments

Comments
 (0)