vue+antd按需引入打包优化
1、antd按需引入
修改babel.config.js
文件,配置 babel-plugin-import
module.exports = {
presets: ["@vue/app"],
+ plugins: [
+ [
+ "import",
+ { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
+ ]
+ ]
};
然后移除前面在 src/main.js
里全量添加的 import 'ant-design-vue/dist/antd.css';
样式代码,并且按下面的格式引入模块。
// src/main.js
import Vue from 'vue'
- import Button from 'ant-design-vue/lib/button';
+ import { Button } from 'ant-design-vue';
- import 'ant-design-vue/dist/antd.css'
import App from './App'
Vue.component(Button.name, Button)
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount("#app");
最后重启 npm run serve
访问页面,antd 组件的 js 和 css 代码都会按需加载
2、webpack打包优化(uglifyjs-webpack-plugin)
在vue.config.js中添加插件
const UglyfyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
configureWebpack: {
optimization: {
minimizer: [
new UglyfyJsPlugin({
test: /\.js(\?.*)?$/i
})
]
}
}
}