重绘和回流其实也和 Eventloop
有关。
-
当
Eventloop
执行完Microtasks
后,会判断document
是否需要更新,因为浏览器是60Hz
的刷新率,每16.6ms
才会更新一次。 -
然后判断是否有
resize
或者scroll
事件,有的话会去触发事件,所以resize
和scroll
事件也是至少16ms
才会触发一次,并且自带节流功能。 -
判断是否触发了
media query
-
更新动画并且发送事件
-
判断是否有全屏操作事件
-
执行
requestAnimationFrame
回调 -
执行
IntersectionObserver
回调,该方法用于判断元素是否可见,可以用于懒加载上,但是兼容性不好 更新界面 -
以上就是一帧中可能会做的事情。如果在一帧中有空闲时间,就会去执行
requestIdleCallback
回调
如何减少重绘和回流:
-
使用
transform
替代top
-
使用
visibility
替换display: none
,因为前者只会引起重绘,后者会引发回流(改变了布局) -
不要把节点的属性值放在一个循环里当成循环里的变量
-
不要使用
table
布局,可能很小的一个小改动会造成整个table
的重新布局 -
动画实现的速度的选择,动画速度越快,回流次数越多,也可以选择使用
requestAnimationFrame
-
CSS
选择符从右往左匹配查找,避免节点层级过多 -
将频繁重绘或者回流的节点设置为图层,图层能够阻止该节点的渲染行为影响别的节点。比如对于
video
标签来说,浏览器会自动将该节点变为图层。 -
避免使用
css
表达式(expression
),因为每次调用都会重新计算值(包括加载页面) -
尽量使用
css
属性简写,如:用border
代替border-width
,border-style
,border-color
-
批量修改元素样式:
elem.className
和elem.style.cssText
代替elem.style.xxx
-
需要要对元素进行复杂的操作时,可以先隐藏(
display:"none"
),操作完成后再显示 -
需要创建多个
DOM
节点时,使用DocumentFragment
创建完后一次性的加入document
-
缓存
Layout
属性值,如:var left = elem.offsetLeft;
这样,多次使用left
只产生一次回流
设置节点为图层的方式有很多,我们可以通过以下几个常用属性可以生成新图层
-
will-change
-
video
、iframe
标签
首屏加载优化方案
-
Vue-Router路由懒加载(利用Webpack的代码切割)
-
使用CDN加速,将通用的库从vendor进行抽离
-
Nginx的gzip压缩
-
Vue异步组件
-
服务端渲染SSR
-
如果使用了一些UI库,采用按需加载
-
Webpack开启gzip压缩
-
如果首屏为登录页,可以做成多入口
-
图片懒加载减少占用网络带宽
-
页面使用骨架屏
-
利用好script标签的async和defer这两个属性。功能独立且不要求马上执行的js文件,可以加入async属性。如果是优先级低且没有依赖的js,可以加入defer属性。
可利用performance.timing
看各个步骤的耗时:白屏时间:performance.timing.responseStart \- performance.timing.navigationStart
二、html
html5有哪些新特性、移除了那些元素?
新增功能:HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加
-
新增选择器 document.querySelector、document.querySelectorAll
-
拖拽释放(Drag and drop) API
-
媒体播放的 video 和 audio
-
本地存储 localStorage 和 sessionStorage
-
离线应用 manifest
-
桌面通知 Notifications
-
语意化标签 article、footer、header、nav、section
-
增强表单控件 calendar、date、time、email、url、search
-
地理位置 Geolocation
-
多任务 webworker
-
全双工通信协议 websocket
-
历史管理 history
-
跨域资源共享(CORS) Access-Control-Allow-Origin
-
页面可见性改变事件 visibilitychange
-
跨窗口通信 PostMessage
-
Form Data 对象
-
绘画 canvas
移除的元素:
-
纯表现的元素:basefont、big、center、font、 s、strike、tt、u
-
对可用性产生负面影响的元素:frame、frameset、noframes
viewport
延伸提问:怎样处理 移动端 1px 被 渲染成 2px问题?
-
局部处理
-
meta标签中的 viewport属性 ,initial-scale 设置为 1
-
rem按照设计稿标准走,外加利用transfrome 的scale(0.5) 缩小一倍即可;
-
全局处理
-
mate标签中的 viewport属性 ,initial-scale 设置为 0.5
-
rem 按照设计稿标准走即可
html文档解析
- 参考:html文档解析为AST语法树[3]
三、css
1. css选择器优先级
!important > inline > id > class > tag > * > inherit > default
-
!important:大于其他
-
行内:1000
-
id选择器:100
-
类,伪类和属性选择器,如.content:10
-
类型选择器和伪元素选择器:1
-
通配符、子选择器、相邻选择器:0
同级别的后写的优先级高。
相同class样式,css中后写的优先级高,和html中的class名字前后无关
2. 水平垂直居中
-
文本水平居中:
text-algin: center
-
文本垂直居中:
line-height
等于容器height
;display: flex; algin-items: center;
-
div水平居中:
-
margin: 0 auto;
-
已知父元素宽度:margin-left: width / 2; transform: tranlateX(-50%)
-
未知父元素宽度:position: absolute: top: 50%; transform: tranlateY(-50%)
-
display: flex; justify-content: center;
div垂直居中:
-
已知父元素高度:margin-top: height / 2; transform: tranlateY(-50%)
-
未知父元素高度:position: absolute: top: 50%; transform: tranlateY(-50%)
-
display: flex; algin-items: center;
3. 移除inline-block间隙
-
移除空格
-
使用margin负值
-
使用font-size:0
-
letter-spacing
-
word-spacing
4. 清除浮动
浮动的影响:(1)由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素 (2)与浮动元素同级的非浮动元素会跟随其后,因为浮动元素脱离文档流不占据原来的位置 (3)如果该浮动元素不是第一个浮动元素,则该元素之前的元素也需要浮动,否则容易影响页面的结构显示 清除浮动的3个方法:
- 使用
clear: both
清除浮动
在浮动元素后面放一个空的div标签,div设置样式clear:both来清除浮动。它的优点是简单,方便兼容性好,但是一般情况下不建议使用该方法,因为会造成结构混乱,不利于后期维护。
- 利用伪元素
after
来清除浮动
给父元素添加了:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的
.clearfix:after{
content: “”;
display: block;
visibility: hidden;
clear: both;
}
- 使用CSS的
overflow
属性
当给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了,它的本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果
- 参考:css清除浮动[4]
5. (外)边距重叠
布局垂直方向上两个元素的间距不等于margin的和,而是取较大的一个
- 同级相邻元素
现象:上方元素设置margin-bottom: 20px
,下方元素设置margin-top: 10px
,实际的间隔是20px
避免办法:同级元素不要同时设置,可都设置margin-bottom或margin-top的一个,或者设置padding
- 父子元素
现象:父元素设置margin-top: 20px
,下方元素设置margin-top: 10px
,实际的间隔是20px
避免办法:父元素有padding-top,或者border-top。或者触发BFC
6. 三栏布局
要求:左边右边固定宽度,中间自适应
float
position
flex
7. BFC
BFC
是Block Formatting Context
,也就是块级格式化上下文
,是用于布局块级盒子的一块渲染区域。
简单来说,BFC 实际上是一块区域,在这块区域中遵循一定的规则,有一套独特的渲染规则。
文档流其实分为普通流
、定位流
和浮动流
和三种,普通流其实就是指BFC中的FC,也即格式化上下文
。
普通流:元素按照其在 HTML 中的先后位置从上到下、从左到右布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行。
格式化上下文:页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用
§ BFC的几条规则: 1)BFC 区域内的元素外边距会发生重叠。
2)BFC 区域内的元素不会与浮动元素重叠。
3)计算 BFC 区域的高度时,浮动元素也参与计算。
4)BFC 区域就相当于一个容器,内部的元素不会影响到外部,同样外部的元素也不会影响到内部。
§ BFC的应用:
-
清除浮动:父元素设置overflow: hidden触发BFC实现清除浮动,防止父元素高度塌陷,后面的元素被覆盖,实现文字环绕等等。
-
消除相邻元素垂直方向的边距重叠:第二个子元素套一层,并设置overflow: hidden,构建BFC使其不影响外部元素。
-
消除父子元素边距重叠,父元素设置overflow: hidden
§ 触发BFC的方式:
-
float 不为 none,浮动元素所在的区域就是一个 BFC 区域。
-
position 的值不是 static 或 relative 的元素所在的区域就是一个 BFC 区域
-
display为 table-cell 的表格单元格元素所在的区域也是一个 BFC 区域
-
overflow 不为 visible 的元素所在的区域也是一个 BFC 区域
- 参考:CSS 中你应该了解的 BFC[5]
8. flex布局
弹性布局,Flex 布局将成为未来布局的首选方案。 兼容性:
-
Webkit 内核的浏览器,必须加上-webkit前缀。
-
ie9不支持
基本概念:
-
容器&项目:采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
-
主轴&交叉轴:堆叠的方向,默认主轴是水平方向,交叉轴是垂直方向。可通过
flex-derection: column
设置主轴为垂直方向。
容器属性:
-
display: flex
-
flex-direction:主轴的方向(即项目的排列方向),row | row-reverse | column | column-reverse;
-
flex-wrap:是否换行,nowrap | wrap | wrap-reverse;
-
flex-flow:direction 和 wrap简写
-
justify-content:主轴对齐方式,flex-start | flex-end | center | space-between | space-around;
-
align-items:交叉轴对齐方式,flex-start | flex-end | center | baseline | stretch;
-
align-content: 多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。flex-start | flex-end | center | space-between | space-around | stretch;
项目的属性:
-
order:项目的排列顺序,数值越小,排列越靠前,默认为0。
-
flex-grow:放大比例,默认为0,指定元素分到的剩余空间的比例。
-
flex-shrink:缩小比例,默认为1,指定元素分到的缩减空间的比例。
-
flex-basis:分配多余空间之前,项目占据的主轴空间,默认值为auto
-
flex:grow, shrink 和 basis的简写,默认值为0 1 auto
-
align-self:单个项目不一样的对齐方式,默认值为auto,auto | flex-start | flex-end | center | baseline | stretch;
-
参考:Flex 布局教程:语法篇 \- 阮一峰[6]
9. CSS动画
1. transition过渡 将变化按照设置的时间长度缓慢执行完毕,而不是立即执行。
delay
的真正意义在于,它指定了动画发生的顺序,使得多个不同的transition可以连在一起,形成复杂效果。
transition的值是简写,扩展开依次是:
transition-property:过渡属性
transition-duration:过渡时间长度
transition-delay:延迟几秒执行
transition-timing-function
-
linear:匀速
-
ease-in:加速
-
ease-out:减速
-
cubic-bezier函数:自定义速度模式,最后那个cubic-bezier,可以使用工具网站[7]来定制。
/* 变化在1s过渡 */
transition: 1s;
/* 指定过渡属性 */
transition: 1s height;
/* 指定多个属性同时发生过渡 */
transition: 1s height, 1s width;
/* 指定delay延时时间 */
transition: 1s height, 1s 1s width;
/* 指定状态变化速度 */
transition: 1s height ease;
/* 指定自定义移状态变化速度 */
transition: 1s height cubic-bezier(.83,.97,.05,1.44);
transition的局限 transition的优点在于简单易用,但是它有几个很大的局限。
-
transition需要事件触发,所以没法在网页加载时自动发生。
-
transition是一次性的,不能重复发生,除非一再触发。
-
transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
-
一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
-
Transition 强调过渡,Transition + Transform = 两个关键帧的Animation
-
Animation 强调流程与控制,Duration + TransformLib + Control = 多个关键帧的Animation
2. animation动画
.element:hover {
animation: 1s rainbow;
/*
animation: 1s rainbow infinite; 关键字infinite让动画无限次播放
animation: 1s rainbow 3; 指定动画播放次数
*/
}
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
其中animation的值是简写,扩展开依次是:
-
animation-name: 指定一个 @keyframes 的名称,动画将要使用这个@keyframes定义。
-
animation-duration: 整个动画需要的时长。
-
animation-timing-function: 动画进行中的时速控制,比如 ease 或 linear.
-
animation-delay: 动画延迟时间。
-
animation-direction: 动画重复执行时运动的方向。
-
animation-iteration-count: 动画循环执行的次数。
-
animation-fill-mode: 设置动画执行完成后/开始执行前的状态,比如,你可以让动画执行完成后停留在最后一幕,或恢复到初始状态。
-
animation-play-state: 暂停/启动动画。
- 参考:CSS动画简介[8]
10. CSS优化、提高性能的方法有哪些
-
多个css合并,尽量减少HTTP请求
-
将css文件放在页面最上面
-
移除空的css规则
-
避免使用CSS表达式
-
选择器优化嵌套,尽量避免层级过深
-
充分利用css继承属性,减少代码量
-
抽象提取公共样式,减少代码量
-
属性值为0时,不加单位
-
属性值为小于1的小数时,省略小数点前面的0
-
css雪碧图
四、javascript
- 参考:javascript面试题整理[9]
五、vue
- 参考:vue面试题整理[10]
六、webpack
-
webpack
是一个模块打包工具,你可以使用webpack管理你的模块依赖,并编绎输出模块们所需的静态文件。 -
它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件(图片、字体等),让开发过程更加高效。
-
对于不同类型的资源,webpack有对应的模块加载器
loader
。 -
webpack模块打包器会分析模块间的依赖关系,最后生成优化且合并后的静态资源。
-
其插件功能提供了处理各种文件过程中的各个生命周期钩子,使开发者能够利用插件功能开发很多自定义的功能。
1. 我写过的webpack相关的文章
-
webpack打包原理\&手写webpack核心打包过程[11]
-
在webpack-dev-server中添加mock中间件实现前端模拟数据功能[12]
-
webpack常用配置详解[13]
-
webpack配置优化[14]
2. 核心打包原理简述
3. Loader
编写一个loader:
loader
就是一个node
模块,它输出了一个函数。当某种资源需要用这个loader
转换时,这个函数会被调用。并且,这个函数可以通过提供给它的this
上下文访问Loader API
。 reverse-txt-loader
。
解析顺序:从下向上,从右向左
// 定义
module.exports = function(src) {
//src是原文件内容(abcde),下面对内容进行处理,这里是反转
var result = src.split(‘’).reverse().join(‘’);
//返回JavaScript源码,必须是String或者Buffer
return module.exports = '${result}'
;
}
//使用
{
test: /.txt$/,
loader: ‘reverse-txt-loader’
}
4. 配置举例
§ base
module.exports = {
entry: {
app: ‘./src/main.js’
},
output: {
path: path.resolve(__dirname, ‘…/dist’),
filename: ‘[name].js’,
publicPath: ‘’
},
resolve: {
extensions: [‘.js’, ‘.vue’, ‘.json’, ‘.css’, ‘.less’],
alias: {
‘@’: resolve(‘src’),
src: resolve(‘src’),
static: resolve(‘static’)
}
},
module: {
rules: [
{
test: /.vue$/,
loader: ‘vue-loader’,
options: vueLoaderConfig
},
{
test: /.js$/,
loader: ‘babel-loader’,
include: [resolve(‘src’), resolve(‘test’)]
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: ‘url-loader’,
query: {
limit: 1,
name: utils.assetsPath(img/[name].[ext]
)
},
include: /nobase64/
},
{
test: /.svg(?\S*)?$/,
loader: ‘svg-sprite-loader’,
query: {
prefixize: true,
name: ‘[name]-[hash]’
},
include: [resolve(‘src’)],
exclude: /node_modules|bower_components/
}
]
},
plugins: [
new VueLoaderPlugin(),
new ProgressBarPlugin({
format: ‘build [:bar] ’ + chalk.green.bold(’:percent’) + ’ (:elapsed seconds) : (:msg)',
clear: false,
width: 60
})
]
};
§ dev
var path = require(‘path’);
var utils = require(‘./utils’);
var webpack = require(‘webpack’);
var config = require(‘…/config’);
var merge = require(‘webpack-merge’);
var baseWebpackConfig = require(‘./webpack.base.conf’);
var CopyWebpackPlugin = require(‘copy-webpack-plugin’);
var MyPlugin = require(‘./htmlPlugin’);
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
var MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
var OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin’);
const TerserPlugin = require(‘terser-webpack-plugin’);
module.exports = merge(baseWebpackConfig, {
mode: ‘development’,
externals: {
vue: ‘Vue’
},
devtool: ‘#source-map’,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath(js/[name].js
),
chunkFilename: utils.assetsPath(js/[name].js
)
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsPlugin(),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, ../static
),
to: path.resolve(config.dev.assetsPublicPath, /dist/static
)
}
]),
new HtmlWebpackPlugin({
alwaysWriteToDisk: true,
filename: ‘index.html’,
template: path.resolve(__dirname, ../src/index.html
), // 模板路径
inject: false,
excludeChunks: [],
baseUrl: ‘’,
currentEnv: ‘development’,
envName: ‘local’,
curentBranch: ‘’
}),
new HtmlHardDisk()
],
optimization: {
/*
作用域提升插件
[注意] 这个插件在 mode: production 时时默认开启的
这样配置时为了在 development 时也开启
https://webpack.js.org/configuration/optimization/#optimizationconcatenatemodules
*/
concatenateModules: true,
splitChunks: {
cacheGroups: {
commons: {
test: /[\/]node_modules[\/]/,
name: ‘vendors’,
chunks: ‘all’
},
styles: {
name: ‘styles’,
test: /.css$/,
chunks: ‘all’,
enforce: true
}
}
},
runtimeChunk: {
name: ‘manifest’
},
minimizer: [
// 代码压缩UglifyJsPlugin的升级版
new TerserPlugin({
cache: true,
parallel: true,
terserOptions: {
sourceMap: true,
warnings: false,
compress: {
// warnings: false
},
ecma: 6,
mangle: true
},
sourceMap: true
}),
new OptimizeCSSPlugin({
cssProcessorOptions: {
autoprefixer: {
browsers: ‘last 2 version, IE > 8’
}
}
})
]
}
}
§ prod
var path = require(‘path’);
var utils = require(‘./utils’);
var webpack = require(‘webpack’);
var merge = require(‘webpack-merge’);
var baseWebpackConfig = require(‘./webpack.base.conf’);
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
var FriendlyErrorsPlugin = require(‘friendly-errors-webpack-plugin’);
var CopyWebpackPlugin = require(‘copy-webpack-plugin’);
var HtmlHardDisk = require(‘html-webpack-harddisk-plugin’);
var MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
var OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin’);
const TerserPlugin = require(‘terser-webpack-plugin’);
module.exports = merge(baseWebpackConfig, {
mode: ‘production’,
externals: {
vue: ‘Vue’
},
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath(js/[name].js
),
chunkFilename: utils.assetsPath(js/[name]-[chunkhash].js
)
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
‘process.env’: env
}),
// extract css into its own file
new MiniCssExtractPlugin({
filename: utils.assetsPath(‘css/[name].css’),
allChunks: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, ../static
),
to: path.resolve(__dirname, ../dist/static
)
}
]),
new HtmlWebpackPlugin({
alwaysWriteToDisk: true,
filename: ‘index.html’,
template: path.resolve(__dirname, ../src/index.html
), // 模板路径
inject: false,
baseUrl: ‘’,
currentEnv: ‘production’,
envName: ‘prod’,
curentBranch: ‘’
}),
new BundleAnalyzerPlugin()
],
optimization: {
minimizer: [
// 代码压缩UglifyJsPlugin的升级版
new TerserPlugin({
// cache: true,
parallel: true,
terserOptions: {
warnings: false,
compress: {
},
// ecma: 6,
mangle: true
},
sourceMap: true
}),
new OptimizeCSSPlugin({
cssProcessorOptions: {
autoprefixer: {
browsers: ‘last 2 version, IE > 8’
}
}
})
],
splitChunks: {
cacheGroups: {
commons: {
test: /[\/]node_modules[\/]/,
name: ‘vendors’,
chunks: ‘all’
}
}
},
runtimeChunk: {
name: ‘manifest’
}
}
};
5. 手动chungk分包
-
optimization.splitChunks(4之前老版本用CommonsChunkPlugin)
-
vue路由懒加载[15]
6. 打包加速的方法
-
devtool 的 sourceMap较为耗时
-
开发环境不做无意义的操作:代码压缩、目录内容清理、计算文件hash、提取CSS文件等
-
第三方依赖外链script引入:vue、ui组件、JQuery等
-
HotModuleReplacementPlugin:热更新增量构建
-
DllPlugin& DllReferencePlugin:动态链接库,提高打包效率,仅打包一次第三方模块,每次构建只重新打包业务代码。
-
thread-loader,happypack:多线程编译,加快编译速度
-
noParse:不需要解析某些模块的依赖
-
babel-loader开启缓存cache
-
splitChunks(老版本用CommonsChunkPlugin):提取公共模块,将符合引用次数(minChunks)的模块打包到一起,利用浏览器缓存
-
Tree Shaking 摇树:基于ES6提供的模块系统对代码进行静态分析, 并在压缩阶段将代码中的死代码(dead code)移除,减少代码体积。
7. 打包体积 优化思路
-
webpack-bundle-analyzer插件可以可视化的查看webpack打包出来的各个文件体积大小,以便我们定位大文件,进行体积优化
-
提取第三方库或通过引用外部文件的方式引入第三方库
-
代码压缩插件
UglifyJsPlugin
-
服务器启用gzip压缩
-
按需加载资源文件
require.ensure
= -
剥离
css
文件,单独打包 -
去除不必要插件,开发环境与生产环境用不同配置文件
-
SpritesmithPlugin雪碧图,将多个小图片打包成一张,用background-image,backgroud-pisition,width,height控制显示部分
-
url-loader 文件大小小于设置的尺寸变成base-64编码文本,大与尺寸由file-loader拷贝到目标目录
8. Tree Shaking 摇树
背景: 项目中,有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝。实际情况中,虽然依赖了某个模块,但其实只使用其中的某些功能。通过 tree-shaking,将没有使用的模块摇掉,这样来达到删除无用代码的目的。
思路: 基于ES6提供的模块系统对代码进行静态分析,并将代码中的死代码(dead code)移除的一种技术。因此,利用Tree Shaking技术可以很方便地实现我们代码上的优化,减少代码体积。
Tree Shaking 摇树 是借鉴了 rollup 的实现。
摇树删除代码的原理: webpack基于ES6提供的模块系统,对代码的依赖树进行静态分析,把import & export标记为3类:
-
所有import标记为/* harmony import */
-
被使用过的export标记为/harmony export([type])/,其中[type]和webpack内部有关,可能是binding,immutable等;
-
没有被使用的export标记为/* unused harmony export [FuncName] */,其中[FuncName]为export的方法名,之后使用Uglifyjs(或者其他类似的工具)进行代码精简,把没用的都删除。
为何基于es6模块实现(ES6 module 特点:):
-
只能作为模块顶层的语句出现
-
import的模块名只能是字符串常量
-
import binding是immutable的
条件:
-
首先源码必须遵循 ES6 的模块规范 (import & export),如果是 CommonJS 规范 (require) 则无法使用。
-
编写的模块代码不能有副作用,如果在代码内部改变了外部的变量则不会被移除。
配置方法:
在package.json里添加一个属性:
{
// sideEffects如果设为false,webpack就会认为所有没用到的函数都是没副作用的,即删了也没关系。
“sideEffects”: false,
// 设置黑名单,用于防止误删代码
“sideEffects”: [
// 数组里列出黑名单,禁止shaking下列代码
“@babel/polly-fill”,
“*.less”,
// 其它有副作用的模块
“./src/some-side-effectful-file.js”
],
}
tree-shaking 摇掉代码中未使用的代码 在生产模式下自动开启
tree-shaking并不是webpack中的某一个配置选项,是一组功能搭配使用后的优化效果,会在生产模式下自动启动
// 在开发模式下,设置 usedExports: true ,打包时只会标记出哪些模块没有被使用,不会删除,因为可能会影响 source-map的标记位置的准确性。
{
mode: ‘develpoment’,
optimization: {
// 优化导出的模块
usedExports: true
},
}
// 在生产模式下默认开启 usedExports: true ,打包压缩时就会将没用到的代码移除
{
mode: ‘production’,
// 这个属性的作用就是集中配置webpack内部的优化功能
optimizition: {
// 只导出外部使用的模块成员 负责标记枯树叶
usedExports: true,
minimize: true, // 自动压缩代码 负责摇掉枯树叶
/**
* webpack打包默认会将一个模块单独打包到一个闭包中
* webpack3中新增的API 将所有模块都放在一个函数中 ,尽可能将所有模块合并在一起,
* 提升效率,减少体积 达到作用域提升的效果
*/
concatenateModules: true,
},
}
使用摇树的注意事项:
-
使用 ES6 模块语法编写代码
-
工具类函数尽量以单独的形式输出,不要集中成一个对象或者类
-
声明 sideEffects
-
自己在重构代码时也要注意副作用
tree-shaking & babel 使用babel-loader处理js代码会导致tree-shaking失效的原因:
- treeshaking 使用的前提必须是ES module组织的代码,也就是说交给ESMOdule处理的代码必须是ESM。当我们使用babel-loader处理js代码之后就有可能将ESM 转换 成commonjs规范(preset-env插件工作的时候就会将esm => coommonjs)
解决办法:
收到配置preset-env的modules:false,确保不会开启自动转换的插件(在最新版本的babel-loader中自动帮我们关闭了转换成commonjs规范的功能)
presets: [
[‘@babel/preset-env’, {module: ‘commonjs’}]
]
9. 常用插件简述
-
webpack-dev-server
-
clean-webpack-plugin:编译前清理输出目录
-
CopyWebpackPlugin:复制文件
-
HotModuleReplacementPlugin:热更新
-
ProvidePlugin:全局变量设置
-
DefinePlugin:定义全局常量
-
splitChunks(老版本用CommonsChunkPlugin):提取公共模块,将符合引用次数的模块打包到一起
-
mini-css-extract-plugin(老版本用ExtractTextWebpackPlugin):css单独打包
-
TerserPlugin(老版本用UglifyJsPlugin):压缩代码
-
progress-bar-webpack-plugin:编译进度条
-
DllPlugin& DllReferencePlugin:提高打包效率,仅打包一次第三方模块
-
webpack-bundle-analyzer:可视化的查看webpack打包出来的各个文件体积大小
-
thread-loader,happypack:多进程编译,加快编译速度
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
总结
根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。
CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
这里分享一些前端学习笔记:
-
html5 / css3 学习笔记
-
JavaScript 学习笔记
-
Vue 学习笔记
tree-shaking & babel 使用babel-loader处理js代码会导致tree-shaking失效的原因:
- treeshaking 使用的前提必须是ES module组织的代码,也就是说交给ESMOdule处理的代码必须是ESM。当我们使用babel-loader处理js代码之后就有可能将ESM 转换 成commonjs规范(preset-env插件工作的时候就会将esm => coommonjs)
解决办法:
收到配置preset-env的modules:false,确保不会开启自动转换的插件(在最新版本的babel-loader中自动帮我们关闭了转换成commonjs规范的功能)
presets: [
[‘@babel/preset-env’, {module: ‘commonjs’}]
]
9. 常用插件简述
-
webpack-dev-server
-
clean-webpack-plugin:编译前清理输出目录
-
CopyWebpackPlugin:复制文件
-
HotModuleReplacementPlugin:热更新
-
ProvidePlugin:全局变量设置
-
DefinePlugin:定义全局常量
-
splitChunks(老版本用CommonsChunkPlugin):提取公共模块,将符合引用次数的模块打包到一起
-
mini-css-extract-plugin(老版本用ExtractTextWebpackPlugin):css单独打包
-
TerserPlugin(老版本用UglifyJsPlugin):压缩代码
-
progress-bar-webpack-plugin:编译进度条
-
DllPlugin& DllReferencePlugin:提高打包效率,仅打包一次第三方模块
-
webpack-bundle-analyzer:可视化的查看webpack打包出来的各个文件体积大小
-
thread-loader,happypack:多进程编译,加快编译速度
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-5xtsYf9p-1711826815096)]
[外链图片转存中…(img-n9T96JY5-1711826815096)]
[外链图片转存中…(img-TqpbGCgM-1711826815097)]
[外链图片转存中…(img-wc1PnhPU-1711826815097)]
[外链图片转存中…(img-1Y2vo96X-1711826815097)]
[外链图片转存中…(img-WdEpnJus-1711826815098)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
[外链图片转存中…(img-bzaCnLHf-1711826815098)]
总结
根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。
CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
这里分享一些前端学习笔记:
-
html5 / css3 学习笔记
-
JavaScript 学习笔记
-
Vue 学习笔记