webpack + vite packaging optimization

Packaging optimization webpack optimization 1. Depend on conversion and compatible with lower version browsers 2. Close sourceMap in production environment 3. Modify the packaging output directory name and store static resources 4. Modify icon 5. Modify webpack configuration 5-1. The configuration written here can overwrite the default configuration of the scaffolding. 5-2. Everything written here […]

Build webpack5+vue2.7+ts scaffolding from 0 to 1

Build webpack5 + vue2.7 + ts scaffolding from 0 to 1 Background At present, the company uses scaffolding developed based on vue-cli4. On the basis of vue-cli, it adds multi-language, multi-skin, interface request, permission and other solutions for business development, which can quickly build the basic structure of the project. But with the iteration of […]

vue3 project performance optimization (webpack version)

1. Turn on gzip optimization 1. Introduce it in vue.config.js const CompressionPlugin = require(“compression-webpack-plugin”); //Introduce gzip compression plug-in 2. Use it in configureWebpack configuration item configureWebpack: (config) => { return { plugins: [ new CompressionPlugin({ //This plug-in cannot use a version that is too high, otherwise an error will be reported: TypeError: Cannot read property […]

What are the operations for webpack front-end performance optimization?

1. Background As front-end projects gradually expand, one problem that will inevitably arise is performance. Especially in large and complex projects, the front-end business may freeze or even crash due to a small data dependency. After a general project is completed, it will be packaged through webpack. Using webpack to optimize the performance of front-end […]

What other tools are similar to webpack?

Article directory 1. Modular tools Rollup Parcel Snowpack Vite webpack references 1. Modular tools Modularization is a way of dealing with breaking down complex systems into better manageable modules Can be used to split, organize and package applications. Each module completes a specific sub-function, and all modules are assembled in a certain way to become […]

[Solved] Vite and Webpack code obfuscation in Vue project

Personal homepage: Don’t call Mr. Cat, public account: Front-end Helmsman ?♂? About the author: A high-quality author in the front-end field and an expert blogger at Alibaba Cloud. Let’s learn and make progress together. Come on, let’s work together! Data collection: You can get advanced front-end materials from me for free Fishing learning and exchange: […]

npm Babel es6 webpack

1. Introduction 1. What is NPM NPM, the full name of Node Package Manager, is a Node.js package management tool. It is the world’s largest module ecosystem. All modules in it are open source and free. It is also a Node.js package management tool, equivalent to Maven on the front end. 2. Installation location of […]

Vue uses webpack-merge to separate production environment and development environment

1. Why it is necessary to separate the production environment and development environment 1. Our current webpack configuration is created in a webpack.config.js file. If it is a large project, there are many items that need to be configured in the development and production environments. Putting them all in webpack.config.js is too messy and unclear. […]