webpack DllPlugin, and why not recommend this plug-in?
webpack DllPlugin, and why not recommend this plug-in?
there is a major problem
when the application of a single page is large, the load pressure of the module can be dispersed by loading on demand, while the js referenced by dll has to be loaded first regardless of whether it is needed or not. When there are more dll, the page loading speed is slow.
of course, you can only draw out the common ones, but that way you can smoke less.
for large components such as d3 echarts, the packaging speed is significantly improved after typing into dll, but at the expense of page loading speed, we don't need every page, but we have to load this part of js, first. This part of js must be loaded before subsequent pages can be loaded. It seems like a very small time, but the waste of page loading speed of 100 milliseconds has sacrificed the experience. The more third-party components, the more serious the problem.
is also still looking for a solution to load dll on demand through a compromise.
this is sacrifice.
you can try to use import ('echarts') to split the code. Webpack will split a file for you and load it when you use it.
this project is used all the time. The key is what is in the dll file. I usually place the most basic needs in the project, such as vue project, put vue,vue-router . Others are like third-party libraries, such as echarts , why should this be placed in dll . It is possible to extract a single file and load it asynchronously. I think there is nothing good or bad, only look at their own suitable application scenario, look at the scene, look at the scene, look at the scene .
Previous: The interface has been in padding state all the time, without timeout, it will jam directly.
webpack project upgrade version configuration is as follows: webpack.json "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "watch": &quo...
webpack.config.js: var webpack = require( webpack ); var path = require("path"); module.exports = { entry: . src app.js , output: { path: path.resolve(__dirname, . bin ), filename: app.bundle.js ...
identity function for calling harmony imports with the correct context __webpack_require__.i = function(value) { return value; }; After webpack is packaged, there will be a function, what is the function of this function? The comments are not unders...
I changed the dev of scripts in package.json to "dev ": "webpack-dev-server-- open ", but there was no page effect. document structure: :webpack-dev-serverdev package.json:mainjsindex.jsindex.jsdistjsbundle.jsbundle.js webpack.config.js:contentBase...
as shown in the picture, the following error is reported when packing, the reason is unknown! ERROR in static js vendor.c6cf6d8258be562986f2.js from UglifyJs ...
this is the configuration in webpack: { test: .jsx$ , exclude: (node_modules) , use: { loader: babel-loader , options: { presets: [ env , react ] ...
I don t know which property to set so that the error prompt of eslint is displayed on the browser ...
recently looking at the JavaScript, generated by Webpack, there is a question that I don t understand: why should Webpack provide the mode of eval , wrapping the generated code of the module with eval ? the discussion here is not limited to devtoo...
this is the source code for the configuration: const path = require( path ) const webpack = require( webpack ) const CleanWebpackPlugin = require( clean-webpack-plugin ) const ExtractTextPlugin = require( extract-text-webpack-plugin ) const pag...
I refer to the picture in the style tag in the .vue file template style webpack where assetsPath ( images [name]. [hash: 7]. [ext] ) is static images [name]. [hash: 7]. [ext] ...
satisfies both the beginning of api and the need to forward to aaa, api order to bbb. api : { target: http: dev.api.aaa.cn , changeOrigin: true }, api order : { target: http: dev.api.bbb.cn , changeOr...
webpack is configured as follows output: { path: path.resolve(__dirname, .. .. public static dev ), filename: js [name].js filename: js [name]_[chunkhash:8].js }, module: { rules: [ { test: .(woff2?|...
Hello, everyone. in the package import rc-scroll-anim , there was no problem with the development in dev environment, but an error was reported when it was run after compilation. After typing log, I found that the content of import in the two modes wa...
after webpack npm start, there is no error, but why is there no build.js file generated in my build folder ...
the same third-party dependency libraries are import in the js of each module, so they are repeatedly packaged when they are packaged. Now I just want to package these basically unchanged ones only once and then lead them to each html. How do I do this? ...
react project created by create-react-app, after using webpack, always report thisCompilation of undefined, how to configure this, please give me some advice! ...
if the title, mainly the front-end code released to CDN, and CDN will co-exist multiple versions, according to access to information, found that there is a way is the front-end in the compilation process, will record the newly packaged file hash file nam...
...
in webpack-dev-server development mode, display:flex will issue the above warning after using autoprefixer . Do you know the solution ? ...
webpack4.x less has been introduced and used in the H1 tag, but there is no style on the final page. index.js index.less webpack.dev.js : ...