请教各位前端大佬 js、css 文件太大问题
后端出身,偶尔也写点前端代码,但是基本上都是借用现有的框架
最近做一个移动端的网页,使用vue 2.0+element-ui
做完build之后发现js和css文件太大了,打开一个页面要加载1.2M的js和css文件
贴一下vue build 的log
Version: webpack 3.12.0
Time: 20721ms
Asset Size Chunks Chunk Names
static/fonts/element-icons.6f0a763.ttf 11 kB [emitted]
static/js/vendor.74e7738e8c0916a28a81.js 726 kB 0 [emitted] [big] vendor
static/js/app.1cd5647b901de7d30cc7.js 5.04 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.78fb8a529b8373e9e08b2d3833526bb5.css 403 kB 1 [emitted] [big] app
static/css/app.78fb8a529b8373e9e08b2d3833526bb5.css.map 574 kB [emitted]
static/js/vendor.74e7738e8c0916a28a81.js.map 2.78 MB 0 [emitted] vendor
static/js/app.1cd5647b901de7d30cc7.js.map 19.9 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 1.08 kB [emitted]
请教各位大佬,该如何优化呢?
5 回复
移动端建议不要用element-ui 包比较大 你可以使用npm run build --report看一看报告分析 优化方式有两种 1、element中的组件使用不多的话使用按需引入 参考 http://element-cn.eleme.io/#/zh-CN/component/quickstart 2、使用一个移动端框架替换element(或者自己写一套精简版的element组件,按需写 移动端使用功能的不会太复杂 这样无需修改代码 只要把组建重写 把element引入干掉就行)
此外,还可以考虑使用gzip压缩,但个人认为element-ui不适合移动端 如果使用的地方不多的话 干脆就换一个框架或者重写
@jamesxieliang11 谢谢!
- 可以使用组件按需加载
- mint-ui试试这个
@yuezm 可别mint了, 组件太少了. Vant了解一下, 拿来做了公司项目.
按需引入 ,或者CDN引入