Основная цель домашняя страница, что смущает так это размер практически голого проекта.
Webpack Bundle Analyzer is started at
127.0.0.1:8888
Use Ctrl+C to close it
File Size Gzipped
dist\js\chunk-vendors.js 162.78 KiB 56.37 KiB
dist\js\app.js 13.50 KiB 4.81 KiB
dist\js\about.js 6.23 KiB 2.06 KiB
dist\css\app.css 1.89 KiB 0.71 KiB
dist\css\about.css 0.11 KiB 0.11 KiB
// vue.config.js
var path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
productionSourceMap: true,
filenameHashing: false,
configureWebpack: {
module: {
rules: [
{
test: /\assets\/.*.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new BundleAnalyzerPlugin(),
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Optional - The path your rendered app should be output to.
// (Defaults to staticDir.)
outputDir: path.join(__dirname, 'prerendered'),
// Optional - The location of index.html
indexPath: path.join(__dirname, 'dist', 'index.html'),
// Required - Routes to render.
routes: ['/', '/about'],
// Optional - Allows you to customize the HTML and output path before
// writing the rendered contents to a file.
// renderedRoute can be modified and it or an equivelant should be returned.
// renderedRoute format:
// {
// route: String, // Where the output file will end up (relative to outputDir)
// originalRoute: String, // The route that was passed into the renderer, before redirects.
// html: String, // The rendered HTML for this route.
// outputPath: String // The path the rendered HTML will be written to.
// }
postProcess(renderedRoute) {
// Ignore any redirects.
renderedRoute.route = renderedRoute.originalRoute;
// Basic whitespace removal. (Don't use this in production.)
renderedRoute.html = renderedRoute.html.split(/>[\s]+</gmi).join('><');
// Remove /index.html from the output path if the dir name ends with a .html file extension.
// For example: /dist/dir/special.html/index.html -> /dist/dir/special.html
if (renderedRoute.route.endsWith('.html')) {
renderedRoute.outputPath = path.join(__dirname, 'dist', renderedRoute.route);
}
return renderedRoute;
},
// Optional - Uses html-minifier (https://github.com/kangax/html-minifier)
// To minify the resulting HTML.
// Option reference: https://github.com/kangax/html-minifier#options-quick-reference
minify: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
decodeEntities: true,
keepClosingSlash: true,
sortAttributes: true
},
// Server configuration options.
server: {
// Normally a free port is autodetected, but feel free to set this if needed.
port: 8001
},
// The actual renderer to use. (Feel free to write your own)
// Available renderers: https://github.com/Tribex/prerenderer/tree/master/renderers
renderer: new Renderer({
// Optional - The name of the property to add to the window object with the contents of `inject`.
// injectProperty: '__PRERENDER_INJECTED',
// Optional - Any values you'd like your app to have access to via `window.injectProperty`.
// inject: {
// foo: 'bar'
// },
// Optional - defaults to 0, no limit.
// Routes are rendered asynchronously.
// Use this to limit the number of routes rendered in parallel.
maxConcurrentRoutes: 4,
// Optional - Wait to render until the specified event is dispatched on the document.
// eg, with `document.dispatchEvent(new Event('custom-render-trigger'))`
// renderAfterDocumentEvent: 'custom-render-trigger',
// Optional - Wait to render until the specified element is detected using `document.querySelector`
// renderAfterElementExists: 'my-app-element',
// Optional - Wait to render until a certain amount of time has passed.
// NOT RECOMMENDED
// renderAfterTime: 5000, // Wait 5 seconds.
// Other puppeteer options.
// (See here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
headless: true // было false Display the browser window when rendering. Useful for debugging.
})
})
]
}
};
package.json
{
"name": "vkorotenko",
"version": "0.2.0",
"private": true,
"description": "vkorotenko",
"author": {
"name": ""
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.1.6",
"vue-router-plugin": "^1.0.2",
"vuex": "^3.3.0",
"vuex-class": "^0.3.2"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@vue/cli-plugin-babel": "^4.3.1",
"@vue/cli-plugin-typescript": "^4.3.1",
"@vue/cli-service": "^4.3.1",
"babel-loader": "^8.0.5",
"cross-env": "^7.0.2",
"css-loader": "^3.5.3",
"deepmerge": "^4.2.2",
"fibers": "^5.0.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"kind-of": "^6.0.3",
"prerender-spa-plugin": "^3.4.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"ts-loader": "^7.0.3",
"typescript": "~3.8.3",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-loader": "^15.9.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Простой
