优化 vue.config 打包配置

This commit is contained in:
icssoa 2021-03-11 16:04:52 +08:00
parent 453ef87983
commit 84820b831a
4 changed files with 63 additions and 64 deletions

View File

@ -5,13 +5,13 @@
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"report": "vue-cli-service build --report", "report": "vue-cli-service build --report",
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint",
"inspect": "vue inspect --mode=production > output.js"
}, },
"dependencies": { "dependencies": {
"axios": "^0.21.1", "axios": "^0.21.1",
"cl-admin": "^1.3.1", "cl-admin": "^1.3.2",
"cl-admin-crud": "^1.4.4", "cl-admin-crud": "^1.4.4",
"cl-admin-export": "^1.0.5",
"cl-admin-theme": "^0.0.3", "cl-admin-theme": "^0.0.3",
"clipboard": "^2.0.7", "clipboard": "^2.0.7",
"codemirror": "^5.59.4", "codemirror": "^5.59.4",

View File

@ -1,5 +1,4 @@
import Crud from "cl-admin-crud"; import Crud from "cl-admin-crud";
import Export from "cl-admin-export";
import Theme from "cl-admin-theme"; import Theme from "cl-admin-theme";
export default { export default {
@ -30,10 +29,6 @@ export default {
} }
} }
}, },
{
name: "export",
value: Export
},
"copy", "copy",
"distpicker", "distpicker",
"demo", "demo",

View File

@ -50,28 +50,28 @@ import {
Badge, Badge,
Card, Card,
Rate, Rate,
Steps, // Steps,
Step, // Step,
Carousel, Carousel,
CarouselItem, CarouselItem,
Collapse, Collapse,
CollapseItem, CollapseItem,
Cascader, Cascader,
ColorPicker, // ColorPicker,
Transfer, // Transfer,
Container, // Container,
Header, // Header,
Aside, // Aside,
Main, // Main,
Footer, // Footer,
Timeline, // Timeline,
TimelineItem, // TimelineItem,
Link, Link,
Divider, Divider,
Image, Image,
Calendar, Calendar,
Backtop, // Backtop,
PageHeader, // PageHeader,
CascaderPanel, CascaderPanel,
Loading, Loading,
MessageBox, MessageBox,
@ -134,8 +134,8 @@ Vue.use(Spinner);
Vue.use(Badge); Vue.use(Badge);
Vue.use(Card); Vue.use(Card);
Vue.use(Rate); Vue.use(Rate);
Vue.use(Steps); // Vue.use(Steps);
Vue.use(Step); // Vue.use(Step);
Vue.use(Carousel); Vue.use(Carousel);
Vue.use(CarouselItem); Vue.use(CarouselItem);
Vue.use(Collapse); Vue.use(Collapse);
@ -154,7 +154,7 @@ Vue.use(Link);
Vue.use(Divider); Vue.use(Divider);
Vue.use(Image); Vue.use(Image);
Vue.use(Calendar); Vue.use(Calendar);
Vue.use(Backtop); // Vue.use(Backtop);
// Vue.use(PageHeader); // Vue.use(PageHeader);
Vue.use(CascaderPanel); Vue.use(CascaderPanel);
Vue.use(Drawer); Vue.use(Drawer);

View File

@ -1,5 +1,4 @@
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin"); const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
const isProduction = process.env.NODE_ENV === "production"; const isProduction = process.env.NODE_ENV === "production";
// 代理列表 // 代理列表
@ -50,7 +49,13 @@ module.exports = {
}, },
chainWebpack: config => { chainWebpack: config => {
// svg // 设置环境变量
config.plugin('define').tap(args => {
args[0]['process.env'].PROXY_LIST = JSON.stringify(PROXY_LIST)
return args
})
// 设置 svg
config.module.rule("svg").uses.clear(); config.module.rule("svg").uses.clear();
config.module config.module
@ -64,49 +69,47 @@ module.exports = {
symbolId: "[name]" symbolId: "[name]"
}); });
// 去掉元素之间空格
config.module
.rule("vue")
.use("vue-loader")
.loader("vue-loader")
.tap(options => {
options.compilerOptions.preserveWhitespace = true;
return options;
})
.end();
// 移除 prefetch 插件
config.plugins.delete("prefetch-index");
// 移除 preload 插件,避免加载多余的资源
config.plugins.delete("preload-index");
// 设置环境变量
config.plugin('define').tap(args => {
args[0]['process.env'].PROXY_LIST = JSON.stringify(PROXY_LIST)
return args
})
// 生产模式下 // 生产模式下
if (isProduction) { if (isProduction) {
config.performance.set("hints", false); // 去掉元素之间空格
config.module
.rule("vue")
.use("vue-loader")
.loader("vue-loader")
.tap(options => {
options.compilerOptions.preserveWhitespace = true;
return options;
})
.end();
// 移除 prefetch 插件
config.plugins.delete("prefetch-index");
// 移除 preload 插件,避免加载多余的资源
config.plugins.delete("preload-index");
config.optimization.minimizer('terser').tap((args) => {
// 去掉注释
args[0].terserOptions.output = {
comments: false
};
return args
})
// 分割模块
config.optimization.splitChunks({ config.optimization.splitChunks({
chunks: "all", chunks: 'all',
maxInitialRequests: Infinity,
minSize: 300000,
automaticNameDelimiter: '-',
cacheGroups: { cacheGroups: {
// 公用模块抽离
common: {
chunks: "initial",
minSize: 0,
minChunks: 2
},
// 第三方库抽离
vendor: { vendor: {
priority: 1, test: /[\\/]node_modules[\\/]/,
test: /node_modules/, name(module) {
chunks: "initial", const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
minSize: 0, return `chunk.${packageName.replace('@', '')}`;
minChunks: 2 },
priority: 10
} }
} }
}); });
@ -114,6 +117,7 @@ module.exports = {
}, },
configureWebpack: config => { configureWebpack: config => {
// config.plugins.push(new HardSourceWebpackPlugin()); // 构建缓存
config.plugins.push(new HardSourceWebpackPlugin());
} }
}; };