介绍下 webpack 热更新原理,是如何做到在不刷新浏览器的前提下更新页面
- 当修改了一个或多个文件
- 文件系统接收更改并通知webpack
- webpack重新编译构建一个或多个模块,并通知HMR服务器进行更新
- HMR Server 使用webSocket通知HMR runtime 需要更新,HMR运行时通过HTTP请求更新jsonp
- HMR运行时替换更新中的模块,如果确定这些模块无法更新,则触发整个页面刷新
如何利用webpack来优化前端性能?(提高性能和体验)
- 压缩代码:删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件, 利用cssnano(css-loader?minimize)来压缩css
- 利用CDN加速:在构建过程中,将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
- 删除死代码(Tree Shaking):将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
- 提取公共代码:commons-chunk-plugin
webpack打包原理
将所有依赖打包成一个bundle.js,通过代码分割成单元片段按需加载
如何提高webpack的构建速度?
- 多入口情况下,使用
CommonsChunkPlugin
来提取公共代码 - 通过
externals
配置来提取常用库 - 利用
DllPlugin
和DllReferencePlugin
预编译资源模块 通过DllPlugin
来对那些我们引用但是绝对不会修改的npm包来进行预编译,再通过DllReferencePlugin
将预编译的模块加载进来。 - 使用
Happypack
实现多线程加速编译 - 使用
webpack-uglify-parallel
来提升uglifyPlugin
的压缩速度。 原理上webpack-uglify-parallel
采用了多核并行压缩来提升压缩速度 - 使用
Tree-shaking
和Scope Hoisting
来剔除多余代码
入口(entry)
module.exports = {
<!-- 单入口 -->
entry: './src',
<!-- 多入口 -->
entry: [
'./src',
'/src2',
],
<!-- 对象写法的单入口 -->
entry: {
main: './src',
}
<!-- 对象写法的第三方库写法 -->
entry: {
app: './src/index.js',
vendors: './src/script/moment.js'
}
<!-- 对象写法的多入口 -->
entry: {
page1: './src/page1.js',
page2: './src/page2.js',
page3: './src/page3.js',
}
}
复制代码
出口(output)
module.exports = {
/*
output接受对象属性,参数为
filename: 打包后的文件名
path: 打包后所需导出的路径
*/
<!-- 单入口 -->
output: {
filename: 'index.js',
path: path.resolve(__dirname, '/dist')
},
<!-- 多入口 -->
output: {
filename: '[name].js',
path: __dirname + 'dist'
}
}
使用过webpack里面哪些plugin和loader
loader
- babel-loader: 将ES6+转移成ES5-
- css-loader,style-loader:解析css文件,能够解释@import url()等
- file-loader:直接输出文件,把构建后的文件路径返回,可以处理很多类型的文件
- url-loader:打包图片,和 file-loader 类似,但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
// url-loader增强版的file-loader,小于limit的转为Base64,大于limit的调用file-loader
npm install url-loader -D
// 使用
module.exports = {
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
outputPath: 'images/',
limit: 500 //小于500B的文件打包出Base64格式,写入JS
}
}]
}]
}
}
- source-map-loader:加载额外的 Source Map 文件,以方便断点调试
- eslint-loader:通过 ESLint 检查 JavaScript 代码
plugins
- html-webpack-plugin: 压缩html
- clean-webpack-plugin: 打包器清理源目录文件,在webpack打包器清理dist目录
- define-plugin:定义环境变量
- commons-chunk-plugin:提取公共代码
- uglifyjs-webpack-plugin:通过UglifyES压缩ES6代码
什么是Tree-shaking?CSS可以Tree-shaking?
Tree-shaking是指在打包中取出那些引入了但在代码中没有被用到的死代码。webpack中通过uglifysPlugin来Tree-shaking JS。CSS需要使用purify-CSS
什么是长缓存?在webpack中如何做到长缓存优化?
- 浏览器在用户访问页面的时候,为了加快加载速度会对用户访问的静态资源进行存储,但是每一次代码升级或更新都需要浏览器下载新的代码,最简单方便的方式就是引入新的文件名称
- webpack中可以在output中指定chunkhash,并且分离经常更新的代码和框架代码。通过NameModulesPlugin或HashedModuleIdsPlugin使再次打包文件名不变
Loader和Plugin的不同?
不同的作用
- Loader直译为"加载器"。Webpack将一切文件视为模块,但是webpack原生是只能解析js文件,如果想将其他文件也打包的话,就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力
- Plugin直译为"插件"。Plugin可以扩展webpack的功能,让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。
不同的用法
- Loader在module.rules中配置,也就是说他作为模块的解析规则而存在。 类型为数组,每一项都是一个Object,里面描述了对于什么类型的文件(test),使用什么加载(loader)和使用的参数(options)
- Plugin在plugins中单独配置。 类型为数组,每一项是一个plugin的实例,参数都通过构造函数传入。
webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全
- 初始化参数: 从配置文件和 Shell 语句中读取与合并参数,得出最终的参数
- 开始编译: 用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译
- 确定入口: 根据配置中的 entry 找出所有的入口文件
- 编译模块: 从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
- 完成模块编译: 在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
- 输出资源: 根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会
- 输出完成: 在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
如何在vue项目中实现按需加载?
Element出品的babel-plugin-component和AntDesign出品的babel-plugin-import 安装以上插件后,在.babelrc配置中或babel-loader的参数中进行设置,即可实现组件按需加载了。
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}