如何解决减少 Vuetify 的包大小
我使用 Vue 2.6.12 + Vuetify 2.4.2 和 Webpack 4.46.0
项目结构:
/dist
/media - 这里是 .png 和其他媒体
/src
/src/plugins/vuetify.js
/src/penalty_frame.html
/src/penalty.js
vuetify.js:
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
penalty.js
import Vue from 'vue'
import vuetify from './plugins/vuetify.js'
var app = new Vue({
el: '#app_penalty',vuetify,...
})
Webpack 配置:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry: {
penalty: path.resolve(__dirname,'./src/penalty.js'),},output: {
path: path.resolve(__dirname,'./dist'),filename: ({ chunk: { name } }) => {
return name === 'main' ? '[name].bundle.js': '[name].[contenthash].js';
},optimization: {
minimize: false
},module: {
rules: [
// CSS,PostCSS,Sass
{
test: /\.(scss|css|sass)$/,use: ['vue-style-loader','style-loader','css-loader','postcss-loader','sass-loader'],{
test: /\.(png|jpg|gif)$/i,use: [
{
loader: 'url-loader',options: {
},],resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' для webpack 1
}
},plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'./src/penalty_frame.html'),// шаблон
filename: 'penalty.html',// название выходного файла
chunks : ['penalty']
}),new CleanWebpackPlugin(),new BundleAnalyzerPlugin(),}
运行 webpack 后,Vuetify 从包文件中占用了太多的大小:1.5 MB 惩罚包大小
在我的情况下如何减少 Vuetify 的包大小?
解决方法
您可以使用 Vuetify 的“摇树”选项。它可以大大降低您的构建大小。
与您分享一个链接,您可以在其中找到有关它的更多信息: https://vuetifyjs.com/en/features/treeshaking/
祝你好运!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。