pages下的文件都被分别打包了没有问题。。
然后，其他的第三方npm包都被打包进了 index.js (3.44 MiB) 导致这个文件很大哦。。
1.已经尝试了自定义vue.config.js打包参数 externals，准备将一些模块导出为cdn模式链接。结果uniapp官方用的vue.js是修改过的，这样的时候，uniapp的页面生命周期就没有了。。
2.还尝试了splitChunks自定义打包，将npm的第三方包单独打包，这样是能减少大小，控制台也没有报错。结果是h5网页白屏无法正常使用。
怎么弄呀？？官方有没有指导下？？引入了 element-ui psl 等第三方包。。程序已经开发的差不多了，结果发现打包文件过大的问题。。。
JJJJJ (作者)
我已经弄了gzip的vue.config.js插件，gzip之后还是不满意。
main.js 如下
import Vue from 'vue'
// #ifdef H5
//element-ui仅H5使用 所以在html页面直接引用
//import 'element-ui/lib/theme-chalk/index.css';
import {
Table,
Form,
FormItem,
TableColumn,
Pagination,
MessageBox,
Loading
} from 'element-ui';
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.component(MessageBox.name, MessageBox);
Vue.component(Table.name, Table);
Vue.component(TableColumn.name, TableColumn);
Vue.component(Form.name, Form);
Vue.component(FormItem.name, FormItem);
Vue.component(Pagination.name, Pagination);
// #endif
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
import store from './store' // vuex状态管理
Vue.prototype.$store = store // vuex状态管理
import {app_home_token_mixin} from '@/components/mixins/app_home_token_mixin.js'
Vue.mixin(app_home_token_mixin)
import {app_mixin} from '@/components/mixins/app_mixin.js'
Vue.mixin(app_mixin)
import {header_mixin} from '@/components/mixins/header_mixin.js'
Vue.mixin(header_mixin)
import {header_top_mixin} from '@/components/mixins/header_top_mixin.js'
Vue.mixin(header_top_mixin)
const app = new Vue({
store,
...App
})
app.$mount()
JJJJJ (作者)
我看了index.7d22c3ab.js 这个最大的，有1.07M，里面有我没有用到的element-ui的组件。。比如ElProgress ElUploadList这些组件我都没有用，，且编译进去了。。我昨天也尝试过element-ui提供的按需加载组件的插件进行编译，可是会报错。。。
加个插件，分析下里边哪个包大
// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
JJJJJ (作者)
点击下面链接看文档
这个插件在uniapp的cli项目下用不了。。想用这个按需载入。。
我马上新建一个项目看看，空的uniapp-cli项目打包是多少MB的js，，和引入一个element-ui组件之后的是多少。。
JJJJJ (作者)
import-element-ui-project.zip是一个vue-cli的uniapp的默认项目，导入了几个element-ui的组件，写了一个页面的案例。。
=====
没有使用vue.config.js，运行案例之前需要npm install
JJJJJ (作者)
使用element-ui官方提供的按需载入插件之后，uniapp的H5项目白屏，控制台报告 addStylesClient.js:259 Uncaught ReferenceError: getApp is not defined
自己手动按需引入来优化一下大小
import Table from 'element-ui/lib/table.js'
import Form from 'element-ui/lib/form.js'
import FormItem from 'element-ui/lib/form-item.js'
import TableColumn from 'element-ui/lib/table-column.js'
import Pagination from 'element-ui/lib/pagination.js'
import MessageBox from 'element-ui/lib/message-box.js'
import Loading from 'element-ui/lib/loading.js'2020-02-19 18:04
还可以修改babel.config.js来实现按需载入
function cached(fn) {
const cache = Object.create(null)
return (function cachedFn(str) {
const hit = cache[str]
return hit || (cache[str] = fn(str))
})
}
const hyphenateRE = /\B([A-Z])/g
const hyphenate = cached((str) => {
return str.replace(hyphenateRE, '-$1').toLowerCase()
})
plugins.push([
'import',
{
'libraryName': 'element-ui',
'customName': (name) => {
return `element-ui/lib/${hyphenate(name)}.js`
}
},
'element-ui'
])
2020-02-19 18:13
DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位
京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001
JJJJJ (作者)
import {
Table,
Form,
FormItem,
TableColumn,
Pagination,
MessageBox,
Loading
} from 'element-ui';
2020-02-19 15:14
JJJJJ (作者)
好吧，我排查下是不是我的其他包太大了。。
2020-02-19 15:15
DCloud_UNI_FXY
回复 JJJJJ: 1.服务器开启gzip压缩，2.贴一下main.js，组件尽可能在页面上引入，不要一股脑全在入口的地方引入
2020-02-19 15:17
DCloud_UNI_FXY
回复 JJJJJ: 样式文件，也不要用js来import，可以直接在html里边引入，比如
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">2020-02-19 15:23
JJJJJ (作者)
回复 DCloud_UNI_FXY: 对的，我样式文件的确是外部引入的。
2020-02-19 15:29