Skip to content

Commit 3317bec

Browse files
Jason-chen-coderJason-chen-coder
committed
'webpack打包优化'
1 parent f71ad6b commit 3317bec

6 files changed

Lines changed: 114 additions & 30 deletions

File tree

‎build/vue-loader.conf‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
* @Descripttion:
3+
* @version:
4+
* @Author: Jason chen
5+
* @Date: 2021-08-16 17:58:07
6+
* @LastEditors: sueRimn
7+
* @LastEditTime: 2021-08-16 17:58:08
8+
*/
9+
'use strict';
10+
const utils = require('./utils');
11+
const config = require('../config');
12+
const isProduction = process.env.NODE_ENV === 'production';
13+
const sourceMapEnabled = isProduction
14+
? config.build.productionSourceMap
15+
: config.dev.cssSourceMap;
16+
17+
module.exports = {
18+
loaders: Object.assign(utils.cssLoaders({
19+
sourceMap: sourceMapEnabled,
20+
extract: isProduction,
21+
}), {
22+
ts: 'ts-loader',
23+
tsx: 'babel-loader!ts-loader',
24+
}),
25+
cssSourceMap: sourceMapEnabled,
26+
cacheBusting: config.dev.cacheBusting,
27+
transformToRequire: {
28+
video: ['src', 'poster'],
29+
source: 'src',
30+
img: 'src',
31+
image: 'xlink:href',
32+
},
33+
};

‎public/index.html‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
<!--
2+
* @Descripttion:
3+
* @version:
4+
* @Author: Jason chen
5+
* @Date: 2020-06-26 16:53:08
6+
* @LastEditors: sueRimn
7+
* @LastEditTime: 2021-08-14 16:09:34
8+
-->
19
<!DOCTYPE html>
210
<html lang="en">
311

@@ -11,13 +19,32 @@
1119
</title>
1220
</head>
1321

14-
<body>
22+
<body style="width:100%;height:100vh">
1523
<noscript>
1624
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
1725
Please enable it to continue.</strong>
1826
</noscript>
1927
<div id="app"></div>
2028
<script src="./mxClient.min.js"></script>
29+
<script>
30+
// 节流
31+
let canDo = true;
32+
function throttle(fn, delay = 200) {
33+
return function () {
34+
console.log('----aa---');
35+
if (!canDo) {
36+
return false;
37+
}
38+
canDo = false;
39+
setTimeout(() => {
40+
// fn();
41+
canDo = true;
42+
}, delay)
43+
}
44+
}
45+
46+
window.onscroll = throttle()
47+
</script>
2148
</body>
2249

2350
</html>

‎src/router/index.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
/*
2+
* @Descripttion:
3+
* @version:
4+
* @Author: Jason chen
5+
* @Date: 2020-06-26 17:46:26
6+
* @LastEditors: sueRimn
7+
* @LastEditTime: 2021-08-16 17:03:46
8+
*/
19
// 导入 vue-router
210
import Vue from 'vue';
311
import VueRouter from 'vue-router'
@@ -13,11 +21,11 @@ const router = new VueRouter({
1321
routes: [
1422
{
1523
path: '/',
16-
component: () => import("../views/customToolbar/customToolbar.vue"),
24+
component: () => import(/*webpackChunkName: "my-customToolbar-chunk"*/ "../views/customToolbar/customToolbar.vue"),
1725
},
1826
{
1927
path: "/customToolbar",
20-
component: () => import("../views/customToolbar/customToolbar.vue")
28+
component: () => import(/*webpackChunkName: "my-customToolbar-chunk"*/ "../views/customToolbar/customToolbar.vue")
2129
},
2230
{
2331
path: "/renderModel",

‎test.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
function sleep (fn, time) {
2+
return new Promise((resolve, reject) => {
3+
setTimeout(() => {
4+
resolve(fn);
5+
}, time);
6+
});
7+
}
8+
let saySomething = (name) => console.log(`hello,${name}`)
9+
async function autoPlay () {
10+
let demo = await sleep(saySomething('Jason Chen'), 1000)
11+
let demo2 = await sleep(saySomething('节省钱'), 1000)
12+
}
13+
autoPlay()

‎vue.config.js‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
88
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
99
const CompressionWebpackPlugin = require('compression-webpack-plugin');
1010
const productionGzipExtensions = ['js', 'css', 'html']
11+
1112
module.exports = {
1213
publicPath: './',
1314
outputDir: 'dist',
@@ -25,19 +26,26 @@ module.exports = {
2526
],
2627
optimization: {
2728
splitChunks: {
28-
chunks: 'all',
29+
chunks: "all",
2930
name: false,
3031
minSize: 0,
3132
cacheGroups: {
32-
defaultVendors: {
33-
test: /[\\/]node_modules[\\/]/,
34-
priority: -10
33+
commons: {
34+
minChunks: 2,//表示被引用次数，默认为1；
35+
maxInitialRequests: 5, //最大的初始化加载次数，默认为 3；
36+
minSize: 0, // 模块的文件体积超过 0 byte就抽取到common中
37+
name: 'chunk-commons',//抽取出来文件的名字，默认为 true，表示自动生成文件名
38+
},
39+
elementUI: {
40+
name: "chunk-element-ui", // 单独将 elementUI 拆包
41+
priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
42+
test: /[\\/]node_modules[\\/]element-ui[\\/]/,
43+
},
44+
mxgraph: {
45+
name: "chunk-mxgraph", // 单独将 elementUI 拆包
46+
priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
47+
test: /[\\/]node_modules[\\/]mxgraph[\\/]/,
3548
},
36-
default: {
37-
minChunks: 2,
38-
priority: -20,
39-
reuseExistingChunk: true
40-
}
4149
}
4250
},
4351
minimizer: [new UglifyJsPlugin(

‎web-serve/app.js‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
/*
2+
* @Descripttion:
3+
* @version:
4+
* @Author: Jason chen
5+
* @Date: 2021-08-12 18:00:06
6+
* @LastEditors: sueRimn
7+
* @LastEditTime: 2021-08-16 15:02:54
8+
*/
19
const express = require('express');
210
// 代理
311
// const proxy = require('http-proxy-middleware');
@@ -21,16 +29,12 @@ function setCustomCacheControl (res, currentFilePath) {
2129
res.setHeader('Cache-Control', 'no-cache');
2230
}
2331
}
32+
// 打包后的静态资源目录
33+
app.use(express.static('../dist'));
2434

25-
app.use(express.static('../deploy'));
26-
27-
// const PROXY_EDSP = process.env.PROXY_EDSP || 'http://10.22.0.137:31801/edsp';
28-
const PROXY_EDSP = 'http://10.22.0.137:31801/edsp';
29-
const PROXY_LOADER = process.env.PROXY_LOADER || 'http://10.22.0.230:8080';
30-
31-
console.log('PROXY_EDSP: ', PROXY_EDSP);
32-
console.log('PROXY_LOADER: ', PROXY_LOADER);
3335
// 代理
36+
37+
// const PROXY_EDSP = 'http://10.22.0.137:31801/edsp';
3438
// app.use(
3539
// '/edsp',
3640
// proxy({
@@ -41,16 +45,7 @@ console.log('PROXY_LOADER: ', PROXY_LOADER);
4145
// changeOrigin: true,
4246
// }),
4347
// );
44-
// app.use(
45-
// '/loader',
46-
// proxy({
47-
// target: PROXY_LOADER,
48-
// pathRewrite: {
49-
// '/loader': '',
50-
// },
51-
// changeOrigin: true,
52-
// }),
53-
// );
48+
5449

5550
app.listen(9900, (req, res) => {
5651
console.log(req, res);

0 commit comments

Comments
 (0)