webpack优化
webPack
1. 基础介绍
单页应用首次进入项目会获取一部分数据，之后将JS包分片，走到那块再去加载那块的JS。这样跨页面重复的JS,CSS不必再去获取，跨页面就不会出现进度条。这样减少了等待时间，提升了用户体验，省去了不必要的流量。但是单页应用也有一个显著的问题：首次进入的时间。加载的资源太多，白屏时间太长
2 查看项目打包
https://www.jianshu.com/p/69f7628120c8
https://www.jianshu.com/p/d275687c446e（可行的配置方案,vue2.0）
https://www.imooc.com/article/288527 (其他分析包工具)
安装webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
webpack.base.conf.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
plugins: [new BundleAnalyzerPlugin()],
在pack.json 的scripts里
"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
4.最终成功的网址
3 编译时间
解决方案：https://www.cnblogs.com/fayin/p/11470936.html
https://segmentfault.com/a/1190000020672528?utm_source=sf-related
架构 https://webpack.docschina.org/loaders/ 基础介绍
- vue-loader 加载和编译Vue组件
- polymer-loader 使用首选项的预处理器和require() 一流组件等Web组件处理HTML和css
- angular2-template-loader 加载和编译角度组件
4 打包时间
##### 4.1 speed-measure-webpack-plugin 用于查看打包的时间
1. npm install
2. webpack.base.conf.js 配置 ，要将这个module.exporest这部分的配置文件都写进去，这样才能分析到这个打包的时间const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
const smp = new SpeedMeasurePlugin();
module.exports=smp.wrap({
context: path.resolve(__dirname, '../'),
entry: {
app: ["babel-polyfill", "./src/main.js"]
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath:
process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src')
}
},
module: {
rules: [
...(config.dev.useEslint ? [/createLintingRule()/] : []),
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader?cacheDirectory',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client')
]
},
{
test: /.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
plugins: [new VueLoaderPlugin(),new BundleAnalyzerPlugin(),],
node: {
setImmediate: false,
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
})
npm run build 查看结果
4.2打包优化方案
- 多进程实例构建，资源并行解析
- 公共代码提取，使用cdn加载
5 解决方案
构建性能https://webpack.docschina.org/guides/build-performance/
- webpack构建性能
- webpack loader
- vue-loader cacheDirectory/cacheIdentifier
Vue loader
*shadowMode *
cacheDirectory
2 vue实现缓存的最佳方案
就是以前自己项目里那个采集系统的从详情也返回到主页，要求页码不变的问题
https://blog.csdn.net/sinat_39726996/article/details/95452758
3 优化方向
缓存（常用）
https://www.cnblogs.com/zhurong/p/12603887.html
npm i hard-source-webpack-plugin -D
这个硬缓存是明显效果的
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') module.exports = { configureWebpack: smp.wrap({ plugins: [ // 为模块提供中间缓存，缓存路径是：node_modules/.cache/hard-source new HardSourceWebpackPlugin(), ] }) }多核（常用）
抽离
压缩
看到专升本+双非硕，我就知道，此事没那么简单