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
})
]
}
}
}
本文介绍如何通过配置Babel和Webpack来实现Vue项目中Ant Design Vue组件库的按需加载,以减小最终包体积并提升加载速度。具体包括:1. 修改Babel配置以实现按需加载;2. 使用uglifyjs-webpack-plugin进行代码压缩。
307

被折叠的 条评论
为什么被折叠?



