yarn install
yarn serve
yarn build
yarn lint
yarn install
yarn serve
yarn build
yarn lint
I'm implementing SSR in an existing project, and I have been stuck on lazy loading. I created a clean vue project, to pin down the problem.
I noticed lazy loading only worked on certain pages, that had no style blocks in the template.
When I import the route on top of the router.js file, the route gets resolved and there is no problem. I'm using vueconfig to configure the build process.
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');
const nodeExternals = require('webpack-node-externals');
const merge = require('lodash.merge');
const webpack = require('webpack');
const TARGET_NODE = process.env.WEBPACK_TARGET === 'node';
const target = TARGET_NODE ? 'server' : 'client';
module.exports = {
filenameHashing: false,
css: {
extract: process.env.NODE_ENV === 'production',
loaderOptions: {
scss: {
prependData: '@import "@/assets/scss/quarks/_colors.scss"; @import "@/assets/scss/utils/mixins/index.scss"; @import "@/assets/scss/quarks/_globals.scss";',
},
},
},
configureWebpack: () => ({
entry: `./src/entry-${target}.js`,
target: TARGET_NODE ? 'node' : 'web',
devtool: TARGET_NODE ? 'source-map' : undefined,
node: TARGET_NODE ? undefined : false,
plugins: [
TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'process.env.VUE_ENV': TARGET_NODE ? "'server'" : "'client'",
}),
],
externals: TARGET_NODE
? nodeExternals({
whitelist: /\.(css|sass|scss)$/,
})
: undefined,
output: {
libraryTarget: TARGET_NODE ? 'commonjs2' : undefined,
},
}),
chainWebpack: (config) => {
if (TARGET_NODE) config.optimization.delete('splitChunks');
config.module
.rule('vue')
.use('vue-loader')
.tap((options) => merge(options, {
optimizeSSR: false,
}));
},
};
My router looks like this, with both lazy loaded routes. In this case About works since there are no imported components with a style block inside. Home does not works since it uses the HelloWorld component, which contains a style block.
const routes = [
{
path: '/',
name: 'Home',
component() {
return import(/* webpackChunkName: "home" */ '../views/Home.vue');
},
},
{
path: '/about',
name: 'About',
component() {
return import(/* webpackChunkName: "about" */ '../views/About.vue');
},
},
];
const router = new VueRouter({
mode: 'history',
routes,
});
export default router;
This is the output of the build:
..\wwwroot\js\chunk-vendors.js 122.19 KiB 41.79 KiB
..\wwwroot\js\main.js 4.36 KiB 2.01 KiB
..\wwwroot\js\home.js 3.39 KiB 1.00 KiB
..\wwwroot\js\about.js 0.48 KiB 0.33 KiB
..\wwwroot\css\main.css 0.25 KiB 0.19 KiB
..\wwwroot\css\home.css 0.17 KiB 0.13 KiB
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.