后端保护构建现代前端开发应用
2024-01-28 06:07:12
接上篇，继续完善项目的构建。
开发速度优化
避免缓存干扰，加入 hash
目前我们生成的上篇文章中，css 文件输出 filename:'[name].[hash:8].css'，但 js 固定
filename:'[name].js'。对于这个webpack 自动加 hash 的操作，注意需要在 package.json 中启动 hash，
我们可以将它改为：[name].[hash:8].js'，这样做的好处是：
1.避免缓存干扰，对于前端js，每次更新后它会生成不同的hash值，比如以前版本是 app.[hash:8].js，现在版本是app.[hash:8].js。如此，浏览器就会认为这是两个不同的资源，进而都会下载，前端页面就得以更新。
2.浏览器并行下载，因为浏览器同时检测到需要下载两个文件，它会并行请求去下载这两个文件。这样做就可以提高我们的构建速度。
代码压缩
webpack 中我们可以使用插件来对我们的代码进行压缩，前端可以用 TerserWebpackPlugin，后端可以用 UglifyJsPlugin。我们只需要在我们的 webpack.config.js 中配置好对应的 plugin，webpack 就知道如何去压缩我们的代码了。
publicPath 配置：
当我们使用 webpack 去构建项目时，要注意 baseUrl 的配置，最理想的情况当然是后端那边通过 api 获取数据，然后通过接口拿到文件后缀对应的文件内容，再进行下载并编译，但我们的项目中并没有使用此种形式，我们只是简单的对接口做了路由配置，所以我们的 baseUrl 还是相对路径比较好。
相关配置：
output:{
publicPath: './'
}
分离构建
对于一些比较大的项目，webpack 提供了分离构建的选项，我们可以将我们的代码进行分离构建，比如将其分为前端构建和后端构建，这样可以极大地提升我们的构建速度，因为我们可以同时构建我们的前端和后端，而不是顺序构建。
相关配置：
const {WebpackManifestPlugin} = require('webpack-manifest-plugin')
output:{
publicPath: './',
chunkFilename: 'js/[name].js?[hash:8]'
}
plugins:[
new WebpackManifestPlugin({
fileName: 'asset-manifest.json'
})
]
分离构建之后，我们可以看到我们的文件多了 asset-manifest.json 这个文件，它里面记录了我们的资源和它的对应的 hash 值。我们通过后端将这个文件读取出来，再将其提供给前端，前端再根据这个文件去请求相关的资源。
上面的只是分离构建的其中一种方式，还有很多种方式可以进行分离构建，这里就不一一列举了。
模块化开发
对于比较大的项目，我们通常会采用模块化开发的方式来进行开发，模块化开发可以让我们更加容易地管理我们的代码，并且可以复用我们的代码，提高我们的开发效率。
Webpack 提供了多种方式来支持模块化开发，最常见的方式就是使用 CommonJS 模块化语法，我们可以通过 require() 函数来引入其他模块，也可以通过 exports 对象来导出我们的模块。
// app.js
const util = require('./util')
util.sayHello()
// util.js
function sayHello(){
console.log('hello world')
}
module.exports = {
sayHello
}
Webpack 还可以支持 ES Module 模块化语法，我们可以通过 import() 函数来引入其他模块，也可以通过 export 来导出我们的模块。
// app.js
import util from './util'
util.sayHello()
// util.js
function sayHello(){
console.log('hello world')
}
export default {
sayHello
}
资源优化
Webpack 提供了多种方式来优化我们的资源，比如我们可以使用代码压缩、图片压缩、字体压缩等方式来优化我们的资源，还可以使用雪碧图、base64 等方式来减少我们的资源请求次数。
const ImageminPlugin = require('imagemin-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module:{
rules:[
{
test:/\.jpg$/,
use:[
{
loader: 'image-webpack-loader',
options:{
mozjpeg:{
quality: 65
}
}
}
]
}
]
}
plugins:[
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
useShortDoctype: true
}
}),
new ImageminPlugin({
pngquant:{
quality: '65-80'
}
})
]
性能提升
Webpack 提供了多种方式来提升我们的性能，比如我们可以使用代码分割、懒加载、CDN 等方式来提升我们的性能。
module:{
rules:[
{
test:/\.js$/,
use:[
{
loader: 'babel-loader',
options:{
presets:['@babel/preset-env']
}
}
]
}
]
}
plugins:[
new webpack.optimize.SplitChunksPlugin({
cacheGroups:{
commons:{
test:/[\\/]node_modules[\\/]/,
name:'vendor',
chunks:'all'
}
}
})
]
开发效率
Webpack 提供了多种方式来提高我们的开发效率，比如我们可以使用热更新、代码提示、错误提示等方式来提高我们的开发效率。
module:{
rules:[
{
test:/\.js$/,
use:[
{
loader: 'eslint-loader',
options:{
formatter: require('eslint-friendly-formatter')
}
}
]
}
]
}
devServer:{
contentBase: './dist',
hot: true
}
