前端 HTML 学习代码, JS & CSS.zip

# webpack性能优化 * 开发环境性能优化 * 生产环境性能优化 ## 开发环境性能优化 * 优化打包构建速度 * HMR * 优化代码调试 * source-map ## 生产环境性能优化 * 优化打包构建速度 * oneOf : 只匹配一个规则 * babel缓存 * 多进程打包 * externals : 不打包的排除 * dll : 单独构建的,独立出来 * 优化代码运行的性能 * 缓存(hash-chunkhash-contenthash) * tree shaking : 默认认为所有代码都有副作用,不会忽略到某个模块, 需要package.json中加入sideEffects,指定哪些有副作用. * code split : 代码分割 * 懒加载/预加载 : 代码中用到了在进行加载. * pwa : 离线访问 * image-webpack-loader: 图片压缩模块. * 注意: 需要用cnpm安装才行,执行后必须执行file-load. * 注意: 转base64不能放这里面, 需要放在这个loader的下一步执行, 或者不用file-load直接使用 type: 'asset' # 配置详解 ## entry: 入口起点 ```text entry: 入口起点 1. string --> './src/file-loader.js' 单入口 打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main 2. array --> ['./src/file-loader.js', './src/add.js'] 多入口 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。 --> 只有在HMR功能中让html热更新生效~ 3. object 多入口 有几个入口文件就形成几个chunk，输出几个bundle文件 此时chunk的名称是 key --> 特殊用法 { // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。 index: ['./src/file-loader.js', './src/count.js'], // 形成一个chunk，输出一个bundle文件。 add: './src/add.js' } ``` ## output ```text output: { // 文件名称（指定名称+目录） filename: 'js/[name].js', // 输出文件目录（将来所有资源输出的公共目录） path: resolve(__dirname, 'build'), // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg' publicPath: '/', chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称 // library: '[name]', // 整个库向外暴露的变量名 // libraryTarget: 'window' // 变量名添加到哪个上 browser // libraryTarget: 'global' // 变量名添加到哪个上 node // libraryTarget: 'commonjs' } ``` ## module ```text module: { rules: [ // loader的配置 { test: /\.css$/, // 多个loader用use use: ['style-loader', 'css-loader'] }, { test: /\.js$/, // 排除node_modules下的js文件 exclude: /node_modules/, // 只检查 src 下的js文件 include: resolve(__dirname, 'src'), // 优先执行 enforce: 'pre', // 延后执行 // enforce: 'post', // 单个loader用loader loader: 'eslint-loader', options: {} }, { // 以下配置只会生效一个 oneOf: [] } ] } ``` ## resolve ```text // 解析模块的规则 resolve: { // 配置解析模块路径别名: 优点简写路径 缺点路径没有提示 alias: { $css: resolve(__dirname, 'src/css') }, // 配置省略文件路径的后缀名 extensions: ['.js', '.json', '.jsx', '.css'], // 告诉 webpack 解析模块是去找哪个目录 modules: [resolve(__dirname, '../../node_modules'), 'node_modules'] } ``` ## dev server ```text devServer: { // 运行代码的目录 contentBase: resolve(__dirname, 'build'), // 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload watchContentBase: true, watchOptions: { // 忽略文件 ignored: /node_modules/ }, // 启动gzip压缩 compress: true, // 端口号 port: 5000, // 域名 host: 'localhost', // 自动打开浏览器 open: true, // 开启HMR功能 hot: true, // 不要显示启动服务器日志信息 clientLogLevel: 'none', // 除了一些基本启动信息以外，其他内容都不要显示 quiet: true, // 如果出错了，不要全屏提示~ overlay: false, // 服务器代理 --> 解决开发环境跨域问题 proxy: { // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(3000) '/api': { target: 'http://localhost:3000', // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api） pathRewrite: { '^/api': '' } } } } ``` ## optimization ```text optimization: { splitChunks: { chunks: 'all' // 默认值，可以不写~ /* minSize: 30 * 1024, // 分割的chunk最小为30kb maxSiza: 0, // 最大没有限制 minChunks: 1, // 要提取的chunk最少被引用1次 maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量 maxInitialRequests: 3, // 入口js文件最大并行请求数量 automaticNameDelimiter: '~', // 名称连接符 name: true, // 可以使用命名规则 cacheGroups: { // 分割chunk的组 // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js // 满足上面的公共规则，如：大小超过30kb，至少被引用一次。 vendors: { test: /[\\/]node_modules[\\/]/, // 优先级 priority: -10 }, default: { // 要提取的chunk最少被引用2次 minChunks: 2, // 优先级 priority: -20, // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块 reuseExistingChunk: true } }*/ }, // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime // 解决：修改a文件导致b文件的contenthash变化 runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` }, minimizer: [ // 配置生产环境的压缩方案：js和css new TerserWebpackPlugin({ // 开启缓存 cache: true, // 开启多进程打包 parallel: true, // 启动source-map sourceMap: true }) ] } ``` # webpack5 此版本重点关注以下内容: - 通过持久缓存提高构建性能. - 使用更好的算法和默认值来改善长期缓存. - 通过更好的树摇和代码生成来改善捆绑包大小. - 清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改. - 通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5. ## 下载 - npm i webpack@next webpack-cli -D ## 自动删除 Node.js Polyfills 早期，webpack 的目标是允许在浏览器中运行大多数 node.js 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack <= 4 附带了许多 node.js 核心模块的 polyfill，一旦模块使用任何核心模块（即 crypto 模块），这些模块就会自动应用。 尽管这使使用为 node.js 编写的模块变得容易，但它会将这些巨大的 polyfill 添加到包中。在许多情况下，这些 polyfill 是不必要的。 webpack 5 会自动停止填充这些核心模块，并专注于与前端兼容的模块。 迁移： - 尽可能尝试使用与前端兼容的模块。 - 可以为 node.js 核心模块手动添加一个 polyfill。错误消息将提示如何实现该目标。 ## Chunk 和模块 ID 添加了用于长期缓存的新算法。在生产模式下默认情况下启用这些功能。 `chunkIds: "deterministic", moduleIds: "deterministic"` ## Chunk ID 你可以不用使用 `import(/* webpackChunkName: "name" */ "