how to package all js and css into a js file in vue-cli, and if not, how to package app.js manifest.js vendor.js into a file
how to package all js and css into a js file in vue-cli, and if not, how to package app.js manifest.js vendor.js into a file
Why is there such a need?
if it is to optimize performance, the loss outweighs the gain. Although there will be some performance optimization in reducing url requests, this will cause you to generate a js file with a different hash each time you modify the code. In this way, the browser's caching effect will be minimal.
vue-cli will package all your js into 3 js,.
Code written by app.js
manifest.js A mapping file
vendor.js the packaged file of the library you use (jq, vue, etc.)
after you change the code in this way, manifest.js and app.js will be repackaged to generate a new file, and the vendor.js file will not be repackaged, so that vendor.js will read
this kind of demand is not very reasonable. Refer to the answer upstairs for details.
but it has to be implemented.
1. No matter what, I also suggest extracting css
suggestions. Otherwise, wait for JS
to finish loading before displaying the style. The user can clearly see that the style is missing before there is a style. The plug-in used for
extraction is extract-text-webpack-plugin
.
2. From the build/webpack.prod.conf.js
version of vue-cli @ 2.9.x
, the common JS
code is extracted to mainfest.js
, vendor.js
, vendor-async.js
. Just comment if you don't need it.
just wrote an article analyzing vue-cli builds
, analyzing the webpack project project built by vue-cli@2.9.3 , with some code and comments for reference.
//
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
//
new webpack.optimize.CommonsChunkPlugin({
// manifest
name: 'manifest',
// `Infinity` chunk
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/-sharpextra-async-commons-chunk
//
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
// `true` chunk `options.name` `options.chunks`
// `options.chunks` `true`
async: 'vendor-async',
// `true` chunk
children: true,
// 33chunk
minChunks: 3
}),
Previous: On the problem of python Total permutation
Next: How to initialize the value of the form when switching pages with Vue.js?
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...
A sudden problem with vue-cli scaffolding today after npm run dev, there was a problem, and the final result was also successful, but the page could not be opened at all excuse me, what is the reason for this? has anyone encountered it ...
introduce error reporting ...
imagine having two components componentA, componentB componentA is a ul , and componentB is called li . < componentB vsway for = "i in list " > (while this list is an array of more than 100) v-for the same number of componentB, is there...
export default { data: { in js imgUrl:require(this.placeImg) } props: [ placeImg:{default: ~assets img 3339.png } ] } this won t work. What it means on the Internet is that require can t parse variables. Is there any way to solve this? ...
cnpm image-webpack-loader gifsicle build:webpack g I installed a libpng library on the server, but two more dependencies were not installed. ...