读者福利
========
由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）
// 先进行了代码分割，然后进行了懒加载
// 懒加载：文件使用时才加载
// 预加载prefetch：会在使用前加载js文件
// 正常加载可以认为是并行加载（同一时间加载多个文件）
// 预加载prefetch：等其他资源加载完毕，浏览器加载完成了，再偷偷加载资源 缺点：兼容性很差
import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({mul}) => {
console.log(mul(4,5));
})
}
8.pwa
PWA：渐进式网络开发应用程序（离线可访问）
workbox --> workbox-webpack-plugin
需要先安装：
npm install --save-dev workbox-webpack-plugin
这个主要是使用插件 workbox-webpack-plugin
安装完成了，对webpack.config.js的配置如下：
/*
PWA：渐进式网络开发应用程序（离线可访问）
workbox --> workbox-webpack-plugin
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
process.env.NODE_ENV = 'production';
module.exports = {
entry: ['./src/js/index.js', './src/index.html'],
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build'),
},
module: {
rules: [
// loader的配置
{
// 处理less资源
test: /.less$/,
use: ['style-loader', 'css-loader', 'less-loader'],
},
// css文件是放置在js文件内的，不需要单独文件夹存放
{
// 处理css资源
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
{
// 处理图片资源
test: /.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 关闭es6模块化
esModule: false,
outputPath: 'imgs',
},
},
{
// 处理html中img资源
test: /.html$/,
loader: 'html-loader',
options: {
esModule: true,
},
},
{
// 处理其他资源
exclude: /.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media',
},
},
],
},
plugins: [
// plugins的配置
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new WorkboxWebpackPlugin.GenerateSW({
/*
1.帮助serviceworker快速启动
2.删除旧的 serviceworker
生成一个 serviceworker 配置文件
*/
clientsClaim: true,
skipWaiting: true,
}),
],
mode: 'production',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true,
// 开启HMR
// 当修改了webpack配置，新配置想要生效，必须重启webpack服务
hot: true,
},
devtool: 'eval-source-map',
};
9.多线程打包
安装thread-loader
npm install --saave-dev thread-loader
webpack.config.js的loader位置的代码，在打包js的时候开启多进程打包。
{
test: /.js$/,
exclude: /node_modules/,
use: [
/*
开启多进程打包
进程启动大概为600ms，进程通信也有开销
只有工作消耗时间比较长，才需要多进程打包
*/
{
loader: 'thread-loader',
options: {
workers: 2, // 进程两个
},
},
{
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50',
},
},
],
],
},
},
],
},
10.externals
这个的作用主要是在html内引入了某些框架的cdn等其他文件，在打包的时候不需要打包
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
mode: 'production',
externals: {
// 通过cdn引入速度更快
// 格式：忽略库名 --> npm包名
jquery: 'jQuery', // 拒绝jQuery被打包进来
},
};
10.dll
使用dll技术对某些库(第三方库：jquery、react、vue)进行单独打包
当运行webpack时，默认查找webpack.config.js配置文件
需求：需要运行webpack.dll.js文件
--> 指令（运行）：webpack --config webpack.dll.js
安装：add-asset-html-webpack-plugin
配置
webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build'),
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
// 下面的重点是优化了jquery重复打包的性能
// 告诉webapck哪些库不参与打包，同时使用时得到名称也得变 打包时先忽略jquery
new webpack.DllReferencePlugin({
最后
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》
