Vue 打包 chunk-vendors

image.png

  • npm i element-ui -S,安装完打包后瞬间到了 2.6 MB

import ElementUI from ‘element-ui’;

import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

image.png

  • 不要看后面的 Time 时间那么短,因为这是内网本机访问快,如果到了外网就跟服务器带宽、性能有关了,但是文件这么大,加载慢,那就需要拆开来进行分块加载,不是一味升级服务器解决问题,毕竟要钱的!

  • 附带还未进行分块分包加载时,打包得到的文件目录(jscss)

image.png

image.png

image.png

三、方式一:compression-webpack-plugin 插件解决方案
四、方式二
  • 还有种是通过 webpack 前端配置,将第三方包分开打包,这样不会将所有第三方包都打包到 chunk-vendors.js 文件,如果第三方包中存在过大的文件,那也会很大。

  • 所以可以两者一起使用也是可以的,选择其中一种使用也可以,下面是两种一起使用,可以根据情况剔除选一种,或者都使用。

const path = require(‘path’);

const webpack = require(‘webpack’)

const CompressionPlugin = require(‘compression-webpack-plugin’)

const zlib = require(‘zlib’)

const isProduction = process.env.NODE_ENV === ‘production’

module.exports = {

devServer: {

disableHostCheck: true

},

configureWebpack: {

resolve: {

alias: {

‘@’: path.resolve(__dirname, ‘./src’),

‘@i’: path.resolve(__dirname, ‘./src/assets’),

}

},

plugins: [

new webpack.IgnorePlugin(/^./locale / , / m o m e n t /, /moment /,/moment/),

// 下面两项配置才是 compression-webpack-plugin 压缩配置

// 压缩成 .gz 文件

new CompressionPlugin({

filename: ‘[path][base].gz’,

algorithm: ‘gzip’,

test: /.js ∣ c ˙ s s |\.css c˙ss|.html$/,

threshold: 10240,

minRatio: 0.8

}),

// 压缩成 .br 文件,如果 zlib 报错无法解决,可以注释这段使用代码,一般本地没问题,需要注意线上服务器会可能发生找不到 zlib 的情况。

new CompressionPlugin({

filename: ‘[path][base].br’,

algorithm: ‘brotliCompress’,

test: /.(js|css|html|svg)$/,

compressionOptions: {

params: {

}

},

threshold: 10240,

minRatio: 0.8

})

],
前端资料汇总

我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。

首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。

更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

  • 11
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值