webpack 打包共工具， 虽然有点瑕疵， 但仍然可以使用
github 地址
readme文档
使用方式
npm 平台
npm install
require 方式
import 方式
Script src 方式
代码案例
源码
分支主题 7
webpack打包的优化
module.exports = {
output: {
library: 'myLib' // 使用library 标示库的名称
// 库的名称支持占位符和普通字符串
}
}
outputlibrary 确定库的名称之后 还可以使用output.libraryTarget 指定库打包出来的规范
output.library的取值范围
var , assign, this, window, global, commonjs commonjs2 mommonjs-module（node.js） amd umd umd2, jsonp 默认的格式为var
指定了使用方式，声明
var 定义了一个变量， 为var myLib
子主题 2
{ output: { library: 'myLib', filename: 'var.js' libraryTarget: 'var' }}
var myLib = (function(module) { './src/index.js' : function (module, exports) {
}})
output
this 方式， 定义了 this.myLib =
库挂载this 上
this.myLib = (function(module) { './src/index.js' : function (module, exports) {
}})
{ output: { library: 'myLib', filename: 'var.js' libraryTarget: 'var' }}
assign myLib 定义了一个全局变量
{ output: { library: 'myLib', filename: 'var.js' libraryTarget: 'assign' }}
myLib = (function(module) { './src/index.js' : function (module, exports) {
}})
output
umd 通用的方式 既可以使用amd, commonjs, 又可以使用script
global 模式时， target 为web 模式时， 为window, node.js 模式下为iglobal , target 配置在webpack
{ output: { library: 'myLib', filename: 'var.js' libraryTarget: 'global' }}
window 环境
window['myLib'] = (function(module) { './src/index.js' : function (module, exports) {
}})
window 环境
window 的方式
{ output: { library: 'myLib', filename: 'var.js' libraryTarget: 'window' }}
window['myLib'] = (function(module) { './src/index.js' : function (module, exports) {
}})
cmd
umd
兼容 windin script, amd, commonjs 都可以
commonjs
target = web
在node的环境的时候， 设置为global, 在target = web 对应于游览器，可以是node,
公共库的输出
一个压缩的版本
生产环境使用
一个未压缩的版本
开发环境的使用
1 输出两个文件
采用多入口的方式，
2 一个压缩， 一个未压缩
默认的时候， 默认输出一个模块
optimization: {
minimize: true, // webpack 开始压缩
minimizer: [new TerserWebpackPlugin({ //进行压缩
test: /\.min\.js$/
})], // 对特定的进行压缩
}
npm install [email protected] -D
可以使用进行压缩， 对es6+ 代码压缩不会出错
这是一个压缩，
是基于uglify 为基础进行js 进行压缩
使用uglify 进行js 压缩对于es6+ 语法可能出错
子主题 5
src
代码的入口文件
main
包的入口文件
npm login
账号， 密码， 邮箱
性能优化
开发环境的优化
提示更多的信息， 方便调试
优化打包时间
缩小文件的搜索范围， 提高打包速度， 优化loader 的搜索范围
test: /\.css$/, 优化loader 部分， css, less, 图片， 第三方字体
使用include , 或者 exclude 两个设置
推荐使用include
include: path.resolve(__dirname, './src')
exclude 可以使用数组
exclude: ['node_modulus]
一个或者多个
优化resolve.modules 配置
resolve: {
modules: [path.resolve(__dirname, './node_modules')]
},
当前目录， 父目录，一层一层到根目录
寻找第三方库， 优先在当前目录下的node_modules 下， 如果没有，继续往上
只在当前项目下, 直接写死，全在这里
优化resolve.alias配置
resolve.alias 配置，通过别名来倒入路径映射到一个新的路径
resolve: {
alias: {
"@assets": path.resolve(__dirname, './src/images')
}
}
原来查找直接从文件入口查找， 现在可以直接指定文件，避免耗时
子主题 1
resovle.extensions 配置
优化开发体验， 但会提搞打包时间
extensions: ['.js, '.json', ".ts", ".jsx"]
文件引入的时候，不需要加后缀， 自动进行后缀补齐
导入语句的尽量带上后缀
后缀尝试列表尽量的晓， 导入语句尽量带上后缀
利用多线程提高打包速度
thread-loader 是针对loader进行优化， 它将loader 放置在一个worker池中进行， 以打包多线程构建， 主要针对js
放在use, 放在所有的loader 之前
时间长和电脑性能好
webpack,打包的核心对js进行打包，打包时间长，主要是babel-loader 导致的， babel-loader 开启缓存 cacheDirectory: true
开启是， babel-loader 将使用默认的缓存目录
modules: {
ruels: [
{
test: /\.js$/,
use: ['thread-loader']
}
]
}
thread-loader 的使用
rules: 【
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
】
压缩速度优化
optimization: { // 对代码进行压缩
minimizer: [
new TerserWebpackPlugin({
test: /\.min\.js$/, // 对带min的进行压缩
cache: true, // 开启缓存
parallel: true, // 多线程
})
]
}
js 的压缩
const TerserWebpackPlugin = require('terser-webpack-plugin'); // 代码的压缩
在生产环境下， 我们在可以添加cache 开启多线程， 优化空间
使用externals 优化cdn 静态资源
有些资源已经部署到cdn了， 有链接了
可以不将依赖打包到bundle, 依赖减少， 体积小
在index.html 通过script 引入，
<script src = 'http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
仍然可以使用 import $ from 'jquery' , 使用
webpack 不会对其打包， externals: {'jquery': 'jquery'}
生产环境的优化
输出文件的优化
子主题 1
webpack配置文件的拆分
webpack.base.config.js
公共模块的信息
webpack.dev.config.js
开发环境的配置信息
webpack.prod.config.js
生成环境的配置信息
使用第三方依赖
npm install webpack-merge
HTML， css, js
生产环境的压缩
压缩
npm install optimize-css-assets-webpack-plugin
压缩css
在webpack 中， css-loader已经集成cssnano, 可以使用optimize-css-assets-webpack-plugin 定义 cssnano的股子， optimize-css-assets-webpack-plugin 是一个css压缩插件，默认压缩引擎是cssnano
css 压缩
npm install cssnano -D
npm i optimize-css-assets-webpack-plugin -D
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
new OptimizeCssAssetsPlugin({
cssProcess: require('cssnano'),
cssProcessOptions: {
discardComents: {removeAll: true}
}
})
const optimiseCss = require('optimize-css-assets-webpack-plugin")
压缩 HTML
借助html-webpack-plugin
生产环境已经压缩了
html-webpack-plugin
new htmlWebpackPlugin({
title: '京东商城‘,
templage: './index.html'
filename: 'index.html',
minify: {
// 压缩HTML
removeComments: true, // 移除HTML的注释
collapseWhitespace: true, // 移除空白符和换行符
minifyCss: true // 压缩内联css
}
})
压缩js
在生产模式下，webpack 会自动压缩代码， 我门可以自己定义压缩工具， 这里使用terser-webpack-plugin, terser
new TerserPlugin({
//使用cache, 加快二次构建速度
terserOptions: {
comments: false,
compress: {
// 删除无用代码
unused: true,
// 删除debugger
drop_debugger: true,
drop_console: true,
// 删除console
dead_code: true
// 删除无用代码
}
}
})；
去掉冗余代码
css 取出冗余的代码 npm install purify-css purifycss-webpack -D
webpack 2.x开始支持 tree shakeing 概念， 就是摇树优化， 删除无用的csss, js, js 的有数 只支持 esmodulde 引入
npm install glob-all purify-css purifycss-webpack -D
const PurifyCss = require('purifycss-webpack');
const glob = require('glob-all');
plugins: [
new PurifyCss({
path: glob.sync([
// 要做css tree Shaging 的路径文件
path.resolve(__dirname, './src/*.html'),
path.resolve(__dirname, './*.js')
])
})
] / / 同样要对html 进行tree shaing
jss 的摇树优化
optimization: {
useExports: true
}
只有 mode 是production 就会生效
webpack.config.js
处理副作用
正常我们会对所有的模块进行 tree shaking , 金在生产模式生效， 我们可以在数组中不需要使用tree shaking 的模块
‘sideEffects’: ['*.css', ''@babel/polyfill']
package.json
代码的拆分
项目的优化
结构
配置文件的拆分
npm login
npm publish
再次发布，需要更新版本
name 对应发布的包的名称
自由主题
性能数据手机工具分析
Chrome dev Tools
Lighthouse
npm install -g lighthouse
安装
推荐cli 方式
LightHouse
Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。只要为 Lighthouse 提供一个需要审
查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。
并网站进行分析，将分析结果以可视化的方式展示给开发者，甚至还指出了可以优化的地方。
lighthoust http://kaikeba.com/ --view
查看报告
默认移动端
--view 以报表的形式展开
子主题 4
lighthouse --emulated-form-factor=desktop
//模拟器设为桌面 //lighthouse http://kaikeba.com --emulated-form-factor=desktop
First Contentful Paint
首次内容绘制， 标记游览器渲染来自DOM第一位内容的时间点， 内容可能是文本，像素等元素， 测试加载速度的体验， 页面最主要的内容何时呈现
Time to Interactive
可交互时间， 用于标记页面已进行视觉渲染并能可靠响应用户输入的时间点
Speed Index
速度指标， 填充页面内容的速度，取开始加载到最后完成渲染， 每一时刻页面未完成度的积分
速度指标
Total Blocking Time（总共阻塞时间）
总共阻塞时间， 计算从FCP 到TTIzhijian ,主线程阻塞的总时间
Largest Contentful Paint
最大的内容绘制时间， 计算从页面开始加载到用户于页面发生交互这段时间内， 最大元素绘制的时间， 改时间会随着页面渲染变化而变化，
Cumulative Layout shify 6
Cumulative Layout Shift
累计布局偏移。测量在页面的整个生命周期中发生的每个意外的样式移动所造成的布局偏移分数的总
和。
测试视觉稳定性上的体验，有多少内容发生了意外的偏移。
性能报告
Perfermance 性能分析
Accessibility 可访问性
Best Practices 最佳实践
SEO 搜索引擎优化
Processive Web App 是否集成PWA
Largest Contentful Paint 5
最大内容绘制时间，计算从页面开始加载到用户与页面发生交互（点击，滚动）这段时间内，最大元素
绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改
变。
最大的元素
TBT Total Blocking Time 4
总共阻塞时间，计算的是从 FCP 到 TTI 之间，主线程阻塞的总时间。阻塞时间是指单次任务占用主线程
超过 50 ms 的部分。
首个像素点
FCP（First Contentful Paint） 1
首次内容绘制， 标记游览器渲染来自dom 第一位内容的时间点， 内容可能是文本， 图像等元素， 测试加载速度的提心啊， 页面最主要的内容何时呈现
有效内容的展示
首次内容绘制，标记浏览器渲染来自 DOM 第一位内容的时间点，内容可能是文本、图像等元素。
测试加载速度的体验，页面最主要的内容何时呈现。
SI（Speend Index）3
速度指标， 填充页面内容的速度， 取开始加载到最后完成渲染， 每一时刻页面未完成度的积分
速度指标，填充页面内容的速度，取开始加载到最后完成渲染，每一时刻页面未完成度的积分。
TTI（Time to Interactive）2
可交互时间， 用于标示页面已进入视觉渲染并能可靠响应用户输入的时间点，页面可能会因为多种远影而无法响应用户输入， 例如页面组件运行所需的js 尚未架子啊，或者耗时较长的任务卒死啊主线程， TTI指标可识别页面初始js 已加载，且主线程处于空闲状态， （没有耗时较长的任务）的时间点
Time to Interactive
可交互时间，用于标记页面已进行视觉渲染并能可靠响应用户输入的时间点。页面可能会因为多种原因
而无法响应用户输入，例如页面组件运行所需的 Javascript 尚未加载，或者耗时较长的任务阻塞主线
程。TTI 指标可识别页面初始 JavaScript 已加载且主线程处于空闲状态（没有耗时较长的任务）的时间
点。
优化建议
图片未压缩， 使用png,
js 是否去掉冗余
无用的css 删除
自由主题
自由主题
打包公共库
webpack.config.js
const path = require('path');
const TerserWebpackPlugin = require('terser-webpack-plugin'); // 代码的压缩
module.exports = {
entry: {
'add-number': './src/index.js', // 同一个入口文件
'add-number.min': './src/index.js' // 同一个入口文件
},
output: {
filename: '[name].js',
library: 'addNumber',
libraryTarget: 'umd',
libraryExport: 'default' // 将模块的默认值导出， 如果没有
//加，则导出模块
},
mode: 'none',
optimization: { // 对代码进行压缩
minimize: true,
minimizer: [
new TerserWebpackPlugin({
test: /\.min\.js$/ // 对带min的进行压缩
})
]
}
}
index.js 包入口
'use strict';
// 这里是包的入口文件
if (process.env.NODE_ENV === 'production') {
module.exports = require('./dist/add-number.min.js')
} else if (process.env.NODE_ENV === 'development') {
module.exports = require('./dist/add-number.js')
}
Copy the code