• Webpack Core Compiler Implementation (Series 1)


    webpack core Compiler implementation The Compiler class is the running entry of webpack. Every time it is packaged, an instance will be generated, which contains a lot of packaged data. Here, the structure is simplified and the key packaging process is strived to be understood. 1. Compiler class initialization Parse import statements save dependency graph […]

  • Angular project too big? Split it reasonably!


    foreword This article describes how to split the project reasonably, and we will discuss it in subsequent articles on performance optimization and other aspects. One of the criticisms of Angular is that it is very bulky after being packaged, and if you are not carefulmain.jsIt’s ridiculously large. In fact, when encountering similar problems, whether it’s […]

  • Sorting out Webpack knowledge system and learning resource recommendation


    foreword There have been several scattered articles written about Webpack before: Build a React project from scratch using Webpack Webpack Sourcemap review Upgrading Webpack5 practice How to write a Webpack Loader How to write a Webpack Plugin The content of this article will not repeat the various details of Webpack, but sort out the relevant […]

  • Wuzzle, you can customize the React application created by create-react-app without eject


    As a command-line tool officially maintained by React,create-react-app(CRA for short) make it extremely easy to createfully configuredThe React application of , helps users quickly enter React development. Its biggest shortcoming is that the created application cannot customize the configuration as desired. If you want to customize, you can onlyeject. And eject means that all configurations […]

  • Gulp to process html, css, js resources


    gulpGenerally used to handle automation tasks, the default cannot handle modularization, nor will it be used for large projects, but it can be compiled using various pluginshtml、css、jsand other resources. don’t know how to usegulpFriends who start the task can refer togulp usage guide process html deal withhtmlresources used togulp-htmlminthis plugin, andhtml-webpack-plugin used in webpackrelatively similar. […]

  • It took a year and a half to publish the first edition. Will this tool dominate the front end?


    Hello everyone, I am Carson. There is never a shortage of hot spots in the front-end field, and new tools will appear basically every six months. In such a fast-paced wave, there is a tool that seems out of place, he isRome。 We can get a clue from the name and look at other tools: […]

  • vue-cli5 + webpack5 + vue2.6x packaging optimization


    The version of the project is based [email protected]/cli 5.0.4and[email protected] vue-cli5 version has built-inwebpack5, and many configurations are built-in, in other words, basic packaging does not need to be invue.config.jsIt is configured in , which greatly simplifies the configuration process. Because it is mainly for the optimization of the project, the creation process will be brief. […]

  • The road to optimization of front-end construction efficiency


    Background of the project Our system (a ToB Web single-page application) has been iterated for many years by the front-end single-page application. At present, it has accumulated hundreds of thousands of lines of business code and 30+ routing modules. The overall code volume and complexity are still relatively high . The project as a whole […]

  • webpack-optimization


    Generally, tools are used to visualize and analyze the points that can be optimizedE.g:webpack-bundle-analyzerAnalyze the points of priority and key optimization Minify the build target: exclude include For example, exclude – node-modules include src belowOptimize packaging speed: tree-shaing code removal without packaging splitChunkPlugin splits large files to improve packaging speed Compress css, js, image, etc., […]

  • dumi builds react component library


    Dumi official website builds react component library According to the official website order, we build a component library mkdir vultures-react && cd vultures-react npx @umijs/create-dumi-lib npm install npm start Install required dependencies The current component library is very mature, and we can repackage it into business components used in work according to the existing component […]

  • webpack basic optimization


  • How to create an npm package that supports both cjs and esm?


    Modularization is an old-fashioned problem, and packaging tools emerge in endlessly. So, how to use these packaging tools to create npm packages that support both cjs and esm. This article does not involve concepts, but some packaging tests. demo repo: https://github.com/FrankKai/n… It can be cloned and built locally for testing. tsc rollup webpack esbuild tsc […]