webpack4.0打包优化策略(二)
打包优化策略
- webpack4.0打包优化策略(一)
- webpack4.0打包优化策略(二)
- webpack4.0打包优化策略(三)
区分开发和生产环境
通常我们在开发网页时需要区分构建环境
- 开发环境(development) 开发过程中方便开发调试的环境
- 生产环境(production) 发布到线上使用的运行环境
通过npm命令区分
通过cross-env模块设置环境变量
cross-env 跨平台地设置及使用环境变量,而不必担心为平台正确设置或使用环境变量。
npm i cross-env -D
复制代码
Usage
npm scripts中:
{"scripts": {"build": "cross-env NODE_ENV=production webpack --mode production","dev": "cross-env NODE_ENV=development webpack-dev-server --mode development",}
}
复制代码
执行npm命令切换环境
npm run build // 生产环境 process.env.NODE_ENV === 'production'
npm run dev // 开发环境 process.env.NODE_ENV === 'development'
复制代码
接下来我们就可以在webpack.config.js 通过process.env.NODE_ENV来得知当前环境标识
代码中区分环境
定义环境常量
webpack4以前都是通过DefinePlugin来定义NODE_ENV环境变量,以决定library中应该引用哪些内容。
NODE_ENV是一个由Node.js暴露给执行脚本的环境变量。通常用于决定在开发环境与生产环境下,服务工具、构建脚本和客户端library的行为。
在webpack.config.js 中添加DefinePlugin插件
const webpack = require('webpack');plugins: [new webpack.DefinePlugn({'process.env': {'NODE_ENV': JSON.stringify(process.env.NODE_ENV)}})
]
复制代码
在main.js中通过判断process.env.NODE_ENV常量 来执行相应逻辑
mode模式配置
在webpack4 增加了mode模式配置 在浏览器环境下指定了 process.env.NODE_ENV 的值,默认是development,但node环境中还是需要cross-env来设置。 mode 是 webpack 4 中新增加的参数选项,其有两个可选值:production 和 development。mode 不可缺省,需要二选一:
production 模式:
- 1.生产环境默认开启了很多代码优化(minify,splite等)
- 2.开发时开启注视和验证,并且自动加上了eval devtool
- 3.生产环境不支持watching,开发环境优化了重新打包的速度
- 4.默认开启了Scope hoisting和Tree-shaking(原ModuleConcatenationPlugin)
- 5.自动设置process.env.NODE_ENV到不同环境,也就是不需要DefinePlugin来做这个了
- 6.如果你给mode设置为none,所有默认配置都去掉了
- 7.如果不加这个配置webpack会出现提醒,所以还是加上吧
development 模式:
1.主要优化了增量构建速度和开发体验
2.process.env.NODE_ENV 的值不需要再定义,默认是 development
3.开发模式下支持注释和提示,并且支持 eval 下的 source maps
const NODE_ENV = process.env.NODE_ENV;
if (NODE_ENV === 'development') { // 开发环境下执行下面代码console.log('development', NODE_ENV);
} else { // 生产环境则执行以下环境console.log('production', NODE_ENV);
}复制代码
DefinePlugn
DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。
webpack配置中区分环境
在项目目录中添加webpack配置文件
- webpack.base.config.js 保存webpack基础通用的配置的文件
- webpack.dev.config.js 保存webpack开发环境配置的文件
- webpack.prod.config.js 保存webpack生成环境配置的文件
- webpack.config.js webpack执行配置文件 保存相应环境的配置和webpack基础配置文件合并后的配置
基础配置 webpack.base.config.js
webpack一些loader配置
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');const HappyPack = require('happypack');
const os = require('os'); // 系统操作函数
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length}); // 指定线程池个数function resolve(dir) {return path.join(__dirname, dir);
}module.exports = {entry: {app: './src/main.js'},output: {path: path.join(__dirname, 'dist'),filename: '[name].js'},module: {rules: [{test: /\.js$/,// use: 'babel-loader?cacheDirectory'use: 'happypack/loader?id=babel', // 缓存loader执行结果exclude: /node_modules/, // 排除不要加载的文件夹include: path.resolve(__dirname, 'src') // 指定需要加载的文件夹}],noParse: function(content) { // content 从入口开始解析的模块路径return /no-parser/.test(content); // 返回true则忽略对no-parser.js的解析}},resolve: {modules: [ // 优化模块查找路径resolve('src'),resolve('node_modules') // 指定node_modules所在位置 当你import第三方模块式 直接从这个路径下搜寻],alias: {funs$: resolve('src/util/funs.js')},extensions: ['.js', '.vue']},plugins: [new webpack.DefinePlugin({ // 定义环境变量"process.env": JSON.stringify(process.env.NODE_ENV)}),new HappyPack({id: 'babel',loaders: ['babel-loader?cacheDirectory'],threadPool: happyThreadPool,verbose: true}),new HtmlWebpackPlugin({template: resolve('index.html'),title: 'hello webpack!'})]
}
复制代码
开发配置webpack.dev.config.js
开发时的输入输出以及开发调试配置 如 devServer devtool 配置
const webpack = require('webpack');module.exports = {plugins: [new webpack.DefinePlugin({'process.env': {'NODE_ENV': JSON.stringify(process.env.NODE_ENV)}})],devServer: {contentBase: resolve('dist'),compress: true,port: 9000}
};
复制代码
生成环境webpack.prod.config.js
生成环境 进行压缩 代码分离等代码优化 线上配置
const webpack = require('webpack');
const path = require('path');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');module.exports = {plugins: [new webpack.DllReferencePlugin({manifest: require(path.join(__dirname, 'dll', 'react.manifest.json'))}),new ParallelUglifyPlugin({workerCount: 4, // 开启几个子进程去并发的执行压缩,默认是当前电脑的cpu数量减1uglifyJS: {output: {beautify: false, // 不需要格式化comments: false // 保留注释},compress: {warnings: false, // Uglifyjs 删除没有代码时,不输出警告// drop_console: true, // 删除所有console语句collapse_vars: true,reduce_vars: true}}}),new HtmlWebpackPlugin({template: path.join(__dirname, 'index.html')}),new HtmlIncludeAssetsPlugin({assets: ['/dll/react.dll.js'],append: false})]
};
复制代码
webpack.config.js 配置合并
借助webpack-merge 将base配置和相应环境配置 合并到'webpack.config.js'
npm i webpack-merge -D
复制代码
webpack.config.js
const base = require('./webpack.base.config');
const merge = require('webpack-merge');let config;
if (process.env.NODE_ENV === 'production') {config = require('./webpack.prod.config');
} else {config = require('./webpack.dev.config');
}module.exports = merge(base, config);
复制代码
运行生产配置
npm run build
复制代码
运行开发配置
npm run dev
复制代码
实时重新加载(live reloading) 和 模块热替换(HMR)
webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。
让我们设置以下:
npm i webpack-dev-server -D
复制代码
配置webpack.dev.config.js
devServer: {contentBase: path.join(__dirname, 'dist'), // 将 dist 目录下的文件,作为可访问文件。compress: true, // 开启Gzip压缩port: 9000, // 端口号inline: true // 在打包后文件里注入一个websocket客户端
}
复制代码
npm scripts
{"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --mode development"}
}
复制代码
启动server
npm run dev
复制代码
浏览器访问localhost:9000 当修改代码ctrl+s 将自动刷新浏览器
启用HMR
模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。
配置webpack.dev.config.js
devServer: {contentBase: path.join(__dirname, 'dist'),compress: true,port: 9000,inline: true,hot: true // 开启HMR
}
复制代码
注意 此外我们还需添加NamedModulesPlugin 和 HotModuleReplacementPlugin 插件
webpack.dev.config.js
{plugins: [new webpack.NamedModulesPlugin(),new webpack.HotModuleReplacementPlugin()]
}
复制代码
其他代码和框架开启热替换
1.React Hot Loader(实时调整 react 组件)
Install
npm install react-hot-loader
复制代码
Getting started
1.1 Add react-hot-loader/babel to your .babelrc:
// .babelrc{"plugins": ["react-hot-loader/babel"]
}
复制代码
1.2 Mark your root component as hot-exported:
// App.js
import React from 'react'
import { hot } from 'react-hot-loader'const App = () => <div>Hello World!</div>export default hot(module)(App)
复制代码
2.Vue loader
vue-cli 已经集成 只需用vue-cli脚手架开发即可
- react-hot-loader
- vue-loader
HMR修改样式表
借助于style-loader的帮助,CSS的模块热替换实际上是相当简单的。
安装如下loader:
npm i style-loader css-loader -D
复制代码
HMR参考配置
- HMR参考
webpack4.0打包优化策略(二)相关推荐
- vue项目打包优化策略
vue项目打包优化策略 使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载 这是首先可以 ...
- CUDA 并行计算优化策略总结
作者 | LustofLife@知乎 来源 | https://zhuanlan.zhihu.com/p/297201517 编辑 | 极市平台 导读 并行计算为了提高算法运行效率,本文通过以矩阵乘法 ...
- CUDA|并行计算优化策略
点击上方"计算机视觉工坊",选择"星标" 干货第一时间送达 作者丨LustofLife@知乎(已授权) 来源丨https://zhuanlan.zhihu.co ...
- 【《Real-Time Rendering 3rd》 提炼总结】(十二) 渲染管线优化方法论:从瓶颈定位到优化策略
本文由@浅墨_毛星云 出品,首发于知乎专栏,转载请注明出处. 文章链接: https://zhuanlan.zhihu.com/p/32928016 这是一篇很特殊的文章.它将会是这个系列文章主线 ...
- 【转载】【《Real-Time Rendering 3rd》 提炼总结】(十二) 渲染管线优化方法论:从瓶颈定位到优化策略
本文由@浅墨_毛星云 出品,首发于知乎专栏,转载请注明出处. 文章链接: https://zhuanlan.zhihu.com/p/32928016 这是一篇很特殊的文章.它将会是这个系列文章主线 ...
- webpack4打包优化
layout: post title: webpack4打包优化 categories: webpack tags: webpack4打包优化 针对vue cli3.0+,webpack4.0+,no ...
- 小程序打包体积优化策略
背景 我们都知道微信小程序有包体积限制,整个小程序所有分包大小不超过 20M,单个分包/主包大小不能超过 2M.然而面对业务的不断更新迭代,代码和资源会越来越多,如果不尽早规划包体积的治理,势必有一天 ...
- Lyndon的量化修炼之路——布林通道优化策略(二)
策略参数优化 //期市妖风大,小心被刮飞.本文不构成任何实质性建议,也不对任何依此进行的交易结果负责 参数优化几乎是优化每一个量化交易策略的必经之路,对于参数优化的基本方法已经在双均线优化策略中介绍过 ...
- Lyndon的量化修炼之路——随机指标(KDJ)优化策略(二)
//期市妖风大,小心被刮飞.本文不构成任何实质性建议,也不对任何依此进行的交易结果负责 重新审视超买超卖的状态 在前文中提到了KDJ指标是对超买超卖有一定指示的,一般情况下我们在应用KDJ指标进行一些 ...
最新文章
- IOS开发控制器之间传值的几种小方法
- 近世代数--素理想和极大理想--有单位元的交换环,每个极大理想都是素理想
- position定位说明
- 【转】Unity3d:读取FBX中的动画
- python双下划线什么意思_python中几个双下划线用法的含义
- github gists 101使代码共享漂亮
- Win32下 Qt与Lua交互使用(二):在Lua脚本中使用Qt类
- 信息学奥赛C++语言: 选夏令营旗手1
- 2011 ICM 美国数据建模赛题
- 易经读书笔记18山风蛊
- Android日期格式化
- 第 6 章 存储 - 039 - Data Volume 之 bind mount
- java io 字符流操作工具类
- 挥泪推荐6款非常非常非常实用的软件!
- Feem(局域网文件传输工具)v4.3.0官方版
- win7家庭版计算机桌面,Win7 home basic家庭普通版显示桌面图标的方法
- 深入理解计算机系统(第三版)家庭作业 第九章
- c语言程序设计基础计算存款利息,《C语言及程序设计》实践参考——定期存款利息计算器...
- 2022年最新有关“绿色消费积分”制度的行业利好
- java基础-宇宙第一YWM:数组数算题目记录