zoukankan      html  css  js  c++  java
  • webpack5的简单优化

    1. 各种loader

    file-loader, 资源文件迁移

    url-loader 文件转化成base64 url

    css-loader 解析css

    style-loader 生成style, 嵌入header

    cleanPkugin变成 output:{ clean:true }

    2. webpack-dev-server与hmr 

    // 一般来讲webpack-dev-server会有live load, webpack-dev-server是把资源打包到内存。

    意思是说 有文件发生改变时, 全项目自动更新, webpack-dev-server内部配了websocket, 所以可以与页面交互,全局更新。这样的问题是比如input的内容填过了, 一刷新, 就没了。

    hmr是基于webpack-dev-server的配置, 只对影响的文件更新

    dev-server {

      port:3000,

    hot:true,

    hotOnly: true

    }

    所以对于某些组件, 可以这样写

    import popup from ‘./popup.js’

    if(module.hot) {

      module.hot.accept('./page2.js', ()=>{

        document.click = popup

      })

    }

    3.在production和development的配置

    webpack-merge负责配置的merge

    mode:Prouction

    其实内部是配置了, optimision:  { mimifiy: true }, devtool:‘’eval‘’等

    4.webpack的优化策略,

    4.1  minicssExtendPlugin,将css抽出, 替换style-loader, 写入loader, 然后在optimision: {  minior: new CssMiniPlugin() }

    4.2  source-map 用来定位错误, 映射到源代码, 默认配置是eval. 开发环境是映射 。可以》eval-cheap-sopource-map

    5. code-splitting

    都依赖axios的模块

    entry: {

      'list': {

        file: './src/list.js'.

        dependOn: 'axios'

           },

      'index': {

        

        file: './src/index.js'.

        dependOn: 'axios'

      },

      axois: 'axios'

    }

    output: {

    name: [name].js

      }

    最终会生成三个文件, 作为代码分割

    6. 懒加载和预加载

    借wenpack ,可以懒加载

    document.onlick = async ()=>{

      const  a = await import ‘a.js’

    }

    预加载的原理是,<link  preload as='script' />

    预加载是利用空闲时间加载

    用法是

    document.onlick = async ()=>{

    /**webpackChunkName a webpackPreFetch=true*/

      const  a = await import ‘a.js’

    }

    tree-shaking

    满足mode=production

    和esm模块, 也就是有export这样的 export const a = 1;

  • 相关阅读:
    [knowledge][perl][pcre][sed] sed / PCRE 语法/正则表达式
    [knowledge][模式匹配] 字符匹配/模式匹配 正则表达式 自动机
    [daily] 内存越界的分析与定位
    [DPI] Cisco Application Visibility and Control
    [bigdata] palantir
    [daily][nfs] nfs客户端设置
    [knowledge][ETA] Encrypted Traffic Analytics
    [tcpreplay] tcpreplay高级用法--使用tcpreplay-edit进行循环动态发包
    [redhat][centos] 让不同小版本的CentOS7使用相同的内核版本
    [grub2] grub2修改启动顺序
  • 原文地址:https://www.cnblogs.com/connie313/p/14826652.html
Copyright © 2011-2022 走看看